- Энциклопедия создания сайтов для начинающих. Создание и поддержка New Web-Masters Club.

Рабочий стол и инструментарий

Вот... поговорим теперь о конкретном. О рабочем столе. Что на нем должно быть и как за ним работать.

На столе может стоять абсолютно все что угодно. Пепельницы, пиво, водка, мониторы, клавиатуры, мыши. Компьютер на столе держать необязательно - у одного моего приятеля материнская плата вообще была привинчена к стене, поверх обоев.

Компьютер может быть любым. Конечно же, лучше, когда он быстрый, но это не обязательно. Для создания хорошей страницы это совершенно не обязательно. Неплохо бы иметь и цветной монитор, но если его нет, это не может быть причиной для бездействия. Дмитрий Кирсанов, например, очень долго работал за монохромным монитором. Это не помешало ему стать автором популярных цветных страниц. (Правда, когда он купил-таки цветной экран, то пришел в ужас от раскраски собственных сайтов.)

При создании страниц я рекомен do you удержаться от использования таких программ как FrontPage(r), HomePage(r), PageMill(r), SiteMill(r) и т.п. Если вы одной рукой мешаете в кастрюле борщ, другой утомительно замачиваете белье, а третьей собираетесь делать сайт, то это ваши программы (они для домохозяек).

Чем плохи программы типа FrontPage(r) по сравнению с текстовыми редакторами? Между ними примерно такая же разница, как между духовой печью и микроволновой. Духовка прекрасно обращается с продуктами - хорошо прогревает их, создает тепло дома, делает нежную корочку, поджаривает хлеб. А микроволновка тупо греет воду в любом продукте, совершенно не заботясь о вкусе. Даже тарелки холодными после нее остаются. А самое гнусное - это гренки в микроволновке. С растаявшим сыром на хлебе, который сгибается пополам, как часы на картинах Дали.
Страницы, вышедшие из FrontPage(r) - это как раз такие гренки. Их видно за километр и они неудобоваримы.

Если вам нужен контроль над страницей, уверенность, что ничего никуда не пропадет, будет везде читаться и не опозорит в глазах профи, используйте специализированный текстовый редактор.

Чем отличается текстовый редактор от текстового процессора? Тем, что первый редактирует, а второй - процессирует? Ну да. Текстовому редактору не нужны разные шрифты, поддержка графики, таблицы, чертежи. Он мал и неприхотлив. Он быстро обрабатывает тексты любого размера. Это то, что нужно для HTML. Если вы работаете на Макинтоше, лучшее, что можно себе представить - редактор BBEdit. Он подкрашивает таги, запоминает положение и размер окна, умеет редактировать файлы прямо на сервере (у него FTP встроен), имеет расширенные возможности поиска и вообще всячески скрашивает жизнь.

Итак, для полноценной работы над страницами понадобятся: текстовый редактор, графический редактор, графический конвертер, конвертер для русских текстов, FTP-клиент, разные браузеры. Ну, и еще много чего по мелочам - таблица безопасных цветов, конвертор RGB -> HEX, TELNET-клиент и т.д.

Copyright © 1997-1999 Артемий Лебедев
E-mail: tema@tema.ru

Коллекции программного обеспечения

  • TUCOWS - считается лучшей в мире коллекцией программного обеспечения для работы с Интернетом

  • 32bit.com - архив 32-разрядного программного обеспечения

  • CICA Archive - содержится много программ для работы с Интернетом

  • CWSAApps.com - содержит отличную коллекцию Интернет-приложений для Windows 3.x/95/NT

  • Download.com - собранная здесь коллекция freeware- и shareware-программ является одной из самых крупных в мире

  • FILEZ - имеется информация примерно о 75 миллионах файлов

  • File Mine - сервер содержит архив программ различного назначения для платформ Unix, Windows, Dos, Mac, Amiga, Atari

  • Jumbo! - содержит в своем архиве более 250 тысяч программ

  • Mac.Org - коллекция бесплатного и условно-бесплатного программного обеспечения для Macintosh

  • Shareware.com - средство поиска и получения свободнораспространяемого программного обеспечения

На главную страницу


-Энциклопедия создания сайтов для начинающих.

А зачем вам вообще нужно делать страницу

Хотя этот вопрос можно и не задавать. Страницы создают для себя или для фирмы.

Собственная страница нужна человеку как "penis extender" (англ.) - нечто, увеличивающее самомнение, подкрепляющее самоуверенность, поддерживающее самочувствие. Человек хочет себя показать. Делать это можно по-разному. Например, рассказать, что вы учитесь в школе такой-то, у вас есть кот и вы любите ходить в походы. И закончить на этом. Тогда кроме вашего же кота на страницу никто заходить не будет, разве что по ошибке.

Можно же создать интересное место, наполнить его информацией, поддерживать и обновлять его. И получать от этого удовольствия не меньше, чем от издания собственного журнала.

Фирме страница нужна тоже. Но не из соображений тщеславия, а потому что про фирму должны знать. А если про нее ничего не знают, то пойдут в ту, про которую знают. WWW-страница экономит фирме кучу денег, рассказывает о ней потенциальному клиенту нужную информацию. И справляется с этим, замечу, гораздо лучше лицемерного менеджера по продажам, который с улыбкой подходит, интересуясь: "Чем могу вам помочь?" Да ничем, отвали ты, сам разберусь.

В этом, кстати, тоже большой плюс Интернета - никто жарко не дышит в лицо, предлагая Утюг Электрический УПЦ-3496. Человек сам придет, утюг исследует, принципиальную схему изучит, сделает потребительское решение и тем самым убедит себя в необходимости приобретения данной модели. Но это так, философское отступление.

Итак, вы решились сделать страницу. Или уже пять лет только тем и занимаетесь. В любом случае, понадобится рабочий стол и инструментарий.

Copyright © 1997-1999 Артемий Лебедев
E-mail: tema@tema.ru


"Best viewed with" посвящается...

Некоторые дизайнеры любят помещать на свои страницы кнопки с надписью типа "Best viewed with Internet Explorer" или "Оптимизировано для Netscape Navigator". Не знаю, чем они руководствуются в таких случаях, но мне кажется, они думают примерно так: "Пусть все знают, что я - настоящий профессионал. Я ориентируюсь на высококачественный продукт, а не на какой-то там ширпотреб". Зато я точно знаю, что думает обычный пользователь при виде такой кнопки (так как я сам прежде всего пользователь Интернет). Ему как бы говорят: "Вы недостаточно хороши для этого сайта, чтобы его смотреть. Ваш любимый броузер - неполноценный, так что идите отсюда туда, откуда пришли. И мне плевать на то, что вы ждали, пока загрузятся мои страницы. И на вас мне тоже плевать."

Ориентация на конкретный броузер - верх дизайнерского непрофессионализма. Прежде всего, она отсекает значительную часть аудитории сайта, а ведь самое главное для любого сайта - максимальное привлечение к нему той аудитории, которой он предназначен. Кроме того, дизайнер сам невольно признается в своем непрофессионализме: "Я не могу создать сайт, который хорошо смотрится во всех броузерах".

Но дело вовсе не в значках с надписью "Best viewed with..." Даже если вы не используете никаких потенциально "опасных" для отображения страниц средств типа Java и JavaScript, нужно обязательно проверять, как смотрится ваш сайт и в Microsoft Internet Explorer, и в Netscape Navigator.

Кроме того, дети Microsoft и Netscape по-разному интерпретируют таблицы, так что тут нужно быть особенно внимательным - ведь практически всегда на таблицах держится весь макет страницы. Есть различия в отображении и других тегов и атрибутов.

В начале 1998 года в компьютерной прессе высказывалось недовольство тем, что русская версия сайта Microsoft не может быть показана с помощью Netscape Navigator (см. "Компьютерра", #14 (242) 12 апреля 1998 г.). Павел Черкашин, генеральный директор российской фирмы Actis Systems, создавшей сайт, заявил, что это объясняется не кознями против конкурента, а "вероятно, уровнем вложенности таблиц".

А что делать, если по каким-либо причинам при подготовке страниц возможно использование только одного броузера? Я рекомендую смотреть страницы в Netscape. И дело тут вовсе не в моих личных пристрастиях (мне как раз больше нравится Internet Explorer). Internet Explorer гораздо более устойчив при интерпретации некорректного HTML-кода. Например, случайно пропущенная комбинация </TR></TD> может оказаться нормальной с точки зрения Explorer, а Нетскейпу буквально снести башню. Поэтому если вы будете применять только Internet Explorer, пользователя Netscape Navigator при просмотре вашей страницы наверняка будет поджидать неприятный сюрприз в виде перекосившихся таблиц, съехавшей в сторону графики и т.д. Но повторюсь еще раз: серьезная работа невозможна без проверки страниц в обоих броузерах.

Интересный вопрос - на какие версии Navigator и Explorer следует ориентироваться. Конечно, неразумно оптимизировать страницы для новейших версий броузеров, которые вышли пару месяцев назад, так как далеко не все пользователи сразу же обновляют свое программное обеспечение.

Следует также учитывать конкретное состояние рынка и маркетинговую политику компаний-производителей.

Даже через год после выхода Internet Explorer 4 доля версии 3.x в России составляла 15-20%. Объясняется это тем, что Microsoft включила третью версию своего броузера в дистрибутив таких своих суперпопулярных продуктов, как Windows 95 OSR2, Office 97 и Visual Studio 97. Кроме того, по сравнению с третьей версией Netscape Navigator, Explorer был быстро русифицирован, обладал более привлекательным интерфейсом и более высокой скоростью работы.

Кстати, посмотрите на сравнительную таблицу функциональных возможностей различных версий Netscape Navigator и Internet Explorer.

Броузер | MS Internet Explorer |  |  |  | Netscape Navigator
Версия | 1.0 | 2.0 | 3.0 | 4.0 | 1.0 | 2.0 | 3.0 | 4.0x | 4.05
GIF-анимация | - | + | + | + | - | + | + | + | +
Фреймы | - | - | + | + | - | + | + | + | +
bgcolor в таблицах | - | + | + | + | - | - | + | + | +
background в таблицах | - | - | + | + | - | - | - | + | +
Java/JavaScript | - | - | + | + | - | + | + | + | +
CSS | - | - | + | + | - | - | - | + | +
ActiveX | - | - | + | + | - | - | - | - | +
Dynamic HTML | - | - | - | + | - | - | - | + | +

Еще одна головная боль вебмастера - отображение кода на различных платформах. Известно, что страницы могут выглядеть совершенно по-разному в броузерах хотя и одной версии, но реализованных для разных операционных систем.

Именно поэтому я осторожно отношусь к новым технологиям типа CSS, Dynamic HTML, XML... Помимо Windows есть много разных операционных систем, и держать их все на своем компьютере я не в состоянии :-)

И в завершение - немного о броузерах так называемых "третьих фирм". Стоит ли проверять вид ваших страниц и в них - это ваше дело. Однако, если ваш сайт ориентирован на иностранную аудиторию (например, тексты написаны на английском языке), обратите внимание на броузер Opera. Эта программа является самой популярной среди конкурентов Navigator и Explorer на западном рынке. В России ее старт несколько затормозился из-за трудностей с отображением русского текста в ранних версиях и платного распространения (shareware $35).

Reklama.Ru. The Banner Network.

Статья Станислава Жаркова
Pro.Net.ru


Песнь о CGI-скриптах

Сегодня такие вещи как гостевая книга, поиск по серверу, форма для отправки сообщений - неотъемлемый атрибут практически любого серьезного сайта. Проблема внедрения этих и других прибамбасов, разумеется, всячески возбуждает воображение начинающего вебмастера, лишая его сна, аппетита и тяги к пиву. К сожалению, изучение HTML-исходников страниц конкурентов ничего, кроме ссылок на некий "cgi-bin", не дает, да еще в телеконференциях иногда встречается упоминание о каких-то cgi-скриптах. Эта сатья и посвящена основам использования этих самых cgi-скриптов во славу и процветание вашего сайта.

Для начала, думаю, надо разобраться с понятиями (вообще разборки и понятия - сегодня очень актульно :-)). CGI-скрипт - это программа, которая выполняется на Web-сервере по запросу клиента (то есть посетителя Web-сайта). Программа эта принципиально ничем не отличается от обычных программ, которые установлены на вашем компьютере - будь то MS Word или игра Quake. CGI - это не язык программирования, на котором написан скрипт, а Common Gateway Interface - специальный интерфейс, с помощью которого и происходит запуск скрипта и взаимодействие с ним.

Правда есть один довольно неприятный момент. На сервере, где находится ваш сайт, должно быть разрешено выполнение cgi-скриптов. Дело в том, что скрипт, как и любая другая программа, может выполнять системные команды на сервере, что представляет потенциальную угрозу безопасности. Как сказал один мой знакомый админ: "Одними cgi-скриптами я могу взломать систему за 5 минут". Так что если вы разместили свой сайт на бесплатном сервере, например, Xoom или Chat.Ru, то вы не сможете запускать скрипты. Впрочем, некоторые бесплатные сервера допускают использование CGI, например, I-Connect. Ну, а если вы платите за размещение страницы, то, как правило, использование cgi-скриптов разрешено (если нет - то и платить провайдеру за поддержку страницы, на мой взгляд, не стоит).

Как работает CGI-скрипт? Я, конечно, могу процитировать какое-нибудь техническое руководство, но пользы от этого будет мало. Поэтому расскажу, как все происходит, своими словами. Итак, посетитель вашей страницы заполняет поля формы, например, для записи в гостевую книгу. После этого он нажимает кнопку "Submit", которая и запускает cgi-скрипт. Скрипт выполняет запрограммированные действия - в данном случае считывает данные из формы и пишет их в файл гостевой книги - и посылает в броузер посетителя обычный HTML-код, например, сообщение "Спасибо, что вы оставили запись в гостевой книге".

Преимуществ CGI-скриптов перед JavaScript и Java на мой взгляд, три, и они весьма значительны:

  • так как программа выполняется сервером, нет никакого значения, какой у посетителя броузер - древний Lynx или новейший Internet Explorer. Нет никаких глюков и сообщений об ошибках;
  • cgi-скрипты позволяют реализовать гораздо более широкий набор функций;
  • код cgi-скрипта закрыт для конкурентов :-)

На каком же языке может быть написана CGI-программа? Ответ вас приятно удивит: практически на любом. Главное, чтобы сервер мог выполнить эту программу, то есть на сервере должен быть установлен компилятор или интерпертатор соответствующего языка программирования. Для систем на базе Unix это обычно C/С++, Perl, Shell; для серверов под управлением Windows NT - те же Perl, С/С++ и любая Windows-система программирования, поддерживающая написание cgi-приложений, например, Visual Basic или Delphi.

Лично я предпочитаю язык Perl. Он является интерпретируемым, то есть программы на Perl не требуют компиляции. Это очень удобно: вы отлаживаете программу на своей домашней машине (где, к примеру, установлена Windows), а затем просто копируете ее на сервер (где, скорее всего, установлен один из клонов Unix - FreeBSD, Linux, Sun Solaris, HP-UX и т.п.). При смене провайдера проблем с переносом скриптов также не будет.

Если же вы решите использовать компилятор, например, C/C++, то вам нужно будет компилировать исходный текст программы на сервере, для чего необходим telnet-доступ к серверу, который провайдеры давать очень не любят.

"Да, но я не знаю Perl" - скажете вы. Ха! Для того, чтобы наладить работу скриптов на вашем сайте, знания языка программирования особенно не нужно. В Сети лежит просто немеренное количество абсолютно бесплатных скриптов на любой вкус - от гостевых книг до сложных баз данных. Все, что вам нужно - хотя бы начальные знания английского языка. Скачать любой скрипт можно с сайта CGI-Resources.Com. Это специализированный каталог, содержащий ссылки на тысячи скриптов на самых разных языках программирования.

Предположим, вы решили использовать скачанный из Сети скрипт. Чтобы он у вас нормально работал, нужно сделать следующее:

  • в начале скрипта вам нужно будет указать некоторые данные, необходимые для запуска скрипта, например, путь к интерпретатору Perl (обычно /usr/local/bin/perl/ или просто /usr/bin/perl/), URL вашего сайта, имя файла, в который будут записываться результаты выполнения скрипта и т.п. Все строки, которые нужно заменить, обычно выделены комментариями, так что вы их легко найдете
  • В зависимости от конфигурации Web-сервера, имя скрипта должно иметь определенное расширение и/или скрипт должен находиться в определенном каталоге. Например, имя скрипта должно иметь расширение .cgi и скрипт должен лежать в каталоге cgi-bin. Проконсультируйтесь у администратора вашего сервера о требованиях, предъявляемых к скриптам.
  • Так как скрипт - это программа, нужно присвоить ему атрибут "исполняемый".
  • Если скрипт пишет данные в какой-нибудь файл (например, файл гостевой книги), то этот файл должен быть доступен для записи.

Reklama.Ru. The Banner Network.

Статья Станислава Жаркова
Pro.Net.ru

Если у Вас не коммерческий проект, что и подразумевается для начинающнго вебмастера, то Вы можете воспользвоваться бесплатным CGI-хостингом. То есть, получить быстро и бесплатно гостевые книги, доски объявлений, чаты и прочее...

X Point CGI | Быстро и легко создайте себе, что хотите 14 CGI Scripts.
CGI For Me | Велеколепное место, если Вы не знаете CGI или у вас нет доступа к CGI. Вы сможете создать себе WWWBoard, Free For All Links, Polls, Counters, Guestbooks, Clocks, Postcards, Search Engines, and LOTS more!
CGI Free | Еще один отличный сервис включает random images, browser redirections, random links, random quotes, and a few other things


Чайнику

И так, Вы решили создать свою первую страничку но не знаете с чего начать. В этой статье содержится минимальная информация которая позволит избежать многих ошибок.

Для начала необходимо освоить какой-нибудь WYSIWIG редактор. Я советую Microsoft Front Page или Встроенный редактор Netskap`а. Многие описывали данные программы но не рассказывали о их существенных недостатках:

1. Они имеют свойство делать вызов файла локально, то есть указывают полный путь к файлу, например C:/serv/img.gif (на самом деле file:///C:/serv/img.gif) и тогда у вас страничка после закачки выглядит нормально, но у других людей, у которых нет файла img.gif в директории serv на диске C она выглядит ужасно (наверно вы не раз видели прямоугольники с подранным листком слева вверху). Эта неприятность обычно возникает когда используются команды copy и paste над картинкой. Поэтому следует либо не использовать данные команды, либо проверять файл странички после сохранения на наличие file:/// .

2. Когда долго работаешь в Netscape Editor`е 3.0 с таблицами он имеет свойство зависать, а также если указываешь в нем border=0 для таблиц он вообще не включает тег border в документ (и если тег border не указан, при просмотре Netscape берет значение border=2 а Internet Explorer border=0).

Хочу отметить, что при создании файлов следует придерживаться некоторых правил. Большинство серверов работает под операционной системой UNIX, она немного отличается по устройству от Виндов - чувствительна к регистру файлов, то есть img.gif и img.GIF под UNIX`ом разные файлы. Я советую пользоваться таким правилом: создавать все файлы маленького регистра, т.к. некоторые программы под Виндами могут искажать имена файлов, например если закачивать файл Img.gif при помощи программы CuteFTP после закачки он превращается в IMG.GIF, вот такие бывают чудеса :)


Фрэймы

Испольльзуя фрэймы, позволяющие разбивать Web-страницы на множественные скроллируемые подокна, вы можете значительно улучшить внешний вид и функциональность информационных систем и Web-приложений. Каждое подокно, или фрэйм, может иметь следующие свойства:

  • Каждый фрэйм имеет свой URL, что позволяет загружать его независимо от других фрэймов
  • Каждый фрэйм имеет собственое имя (параметр NAME), позволяющее переходить к нему из другого фрэйма
  • Размер фрэйма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрешено указанием специального параметра)

Данные свойства фрэймов позволяют создавать продвинутые интерфейсные решения, такие как:

  • Размещение статической информации, которую автор считает необходимым постоянно показывать пользователю, в одном статическом фрэйме. Это может быть графический логотип фирмы, copyright, набор управляющих кнопок
  • Помещение в статическом фрэйме оглавления всех или части WEB-документов, содержащихся на WEB-сервере, что позволяет пользователю быстро находить интересующую его информацию
  • Создавать окна результатов запросов, когда в одном фрэйме находитс собственно запрос, а в другом результаты запроса
  • Создавать формы типа "мастер-деталь" для WEB-приложений, обслуживающих базы данных

<HTML>
<HEAD>...</HEAD>
<FRAMESET>...</FRAMESET>
</HTML>

Однако, фрэйм-документ является специфичным видом HTML-документа, поскольку не содержит элемента BODY и какой-либо информационной нагрузки соответственно. Он описывает только фрэймы, которые будут содержать информацию (кроме случа двойного документа, который мы рассмотрим позже).

Бродя по Интернету, вы наверняка не раз видели странички разбитые на несколько частей. Эти части и называются фреймами. Программно разбиение окна браузера на фреймы реализуется так:

1. Создается html файл (обычно это первая страничка сервера по имени index.htm) в котором задаются размеры и количество фреймов, а также имена файлов соответствующих фреймам и некоторые атрибуты для каждого фрейма.

2. Создаются отдельные html странички для каждого фрейма.

Попробуем создать html файл реализующий разбиение экрана на две части. Для этого нам понадобится два обычных html файла с именами homepage.htm и menu.htm. Главный файл обзовем к примеру index.htm, вот как он должен выглядеть:

<HTML>
<TITLE>Название вашей странички</TITLE>
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="frame1">
<FRAME SRC="menu.htm" NAME="frame2">
</FRAMESET>
</HTML>

Рассмотрим каждый тэг по отдельности:

<HTML></HTML> и <TITLE><TITLE> - стандартные тэги для всех html файлов

<FRAMESET> в этом тэге задается количество рядов или столбцов ROWS и COLS соответственно, а также их размеры и расположение. Существует три способа задания их размера:

по пикселам - просто напишите высоту или ширину в пикселах.
процентами - пишите сколько процентов от окна браузера вы хотите отдать фрейму и после цифр ставите знак % Также позаботьтесь чтобы все ваши %`ы в суме составляли 100%.
звездочка - все оставшееся место в окне равняется значку *. Например вы можете написать 20%,20%,60% или 20%,20%,* и никакой разницы не будет.

В этом же тэге можно задать толщину разграничительной линии и окаймляющей рамки командами FRAMEBORDER="X" и BORDER="Y" где x и y толщина в пикселах.

В нашем случае (<FRAMESET cols="*,140">) мы разделяем окно на два столбца, правое шириной в 140 пикселов, а левое шириной во весь оставшийся экран

<FRAME> - здесь задаются атрибуты для каждого фрейма персонально.

Команда SRC задает имя файла который загрузится в этом фрейме, в нашем случае имя файла homepage.htm (<FRAME SRC="homepage.htm" ...).

Команда NAME задает имя данного фрейма, в нашем случае имя "frame1" . Имя необходимо для того чтобы в последствии указать к какому фрейму использовать ссылку. К примеру мы хотим чтобы нажимая на ссылку в фрейме содержащем файл menu.htm содержимое файла ссылки показывалось в фрейме содержащем файл homepage.htm. Для этого нам необходимо откоректировать html код ссылки:

<A HREF="file.htm">file</A> - что было
<A HREF="file.htm" TARGET="frame1">file</A> - что должно быть
А если вы хотите чтобы файл загрузился в главном окне браузера то напишите в ссылке TARGET="_top"

Также в этом тэге можно задать величину граници фрейма за которую ничего кроме бэкграунда не может заходить. Это делается командами MARGINWIDTH="x" и MARGINHEIGHT="y", где x и y величина в пикселах.

</FRAMESET> закрывающий тэг.

Вот несколько примеров создания фреймов:

* 140
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="frame1">
<FRAME SRC="menu.htm" NAME="frame2">
</FRAMESET>
100 *
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
100

*
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

*
60
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>

*
45% 55%
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="45%,55%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET>
</FRAMESET>
*
15%
15%

70%
<FRAMESET cols="*,55%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>
50% | 50%
50% | 50%
 <FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>

Общий контэйнер FRAMESET описывает все фрэймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или несколько горизонтальных фрэймов. Тэг FRAMEљописывает каждый фрэйм в отдельности. Рассмотрим более детально каждый компонент.

FRAMESET

<FRAMESET [COLS="value" | ROWS="value"]>

Тэг <FRAMESET> имеет завершающий тэг </FRAMESET>. Все, что может находиться между этими двумя тэгами, это тэг <FRAME>, вложенные тэги <FRAMESET> и </FRAMESET>, а также контейнер из тэгов <NOFRAME> и </NOFRAME>, который позволяет строить двойные документы для броузеров, поддерживающих фрэймы и не поддерживающих фрэймы.

Данный тэг имеет два взаимоисключающих параметра: ROWS и COLS.

ROWS="список-определений-горизонтальных-подокон"

  • Данный тэг содержит описания некоторого количества подокон, разделенные запятыми. Каждое описание представляет собой числовое значение размера подокна в пикселах, процентах от всего размера окна или связанное масштабное значение. Количество подокон определяется количеством значений в списке. Общая сумма высот подокон должна составлять высоту всего окна (в любых измеряемых величинах). Отсутствие атрибута ROWS определяет один фрэйм, величиной во все окно броузера.

    Синтаксис используемых видов описания величин подокон:

    value

    Простое числовое значение определяет фиксированную высоту подокна в пикселах. Это далеко не самый лучший способ описания высоты подокна, поскольку различные броузеры имеют различный размер рабочего поля, не говоря уже о различных экранных разрешениях у пользователя. Если вы, все же, используете данный способ описания размера, то настоятельно рекомендуется сочетать его с каким-либо другим, чтобы в результате вы точно получили 100%-ное заполнение окна броузера вашего пользователя.

    value%

    Значение величины подокна в процентах от 1 до 100. Если общая сумма процентов описываемых подокон превышает 100, то размеры всех фрэймов пропорционально уменьшаются до суммы 100%. Если, соответственно, сумма меньше 100, то размеры пропорционально учеличиваются.

    value*

    Вообще говоря, значение value в данном описании является необязательным. Символ "*" указывает на то, что все оставшееся место будет принадлежать данному фрэйму. Если указывается два или более фрэйма с описанием "*" (например "*,*"), то оставшееся пространство делится поровну между этими фрэймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрэйма (во сколько раз од будет больше аналогично описанного чистой звездочкой). Например, описание "3*,*,*", говорит, что будет создано три фрэйма с размерами 3/5 свободного пространства дл первого фрэйма и по 1/5 для двух других.

COLS="список-определений-горизонтальных-подокон"

  • То же самое, что и ROWS, но делит окно по вертикали, а не по горизонтали.

    Внимание! Совместное использование данных параметров может привести к непредствазуемым результатам. Например, строка: <FRAMESET ROWS="50%,50%" COLS "50%,50%"> может привести к ошибочной ситуации.

Примеры:

<FRAMESET COLS="50,*,50"> - описывает три фрэйма, два по 50 точек справа и слева, и один внутри этих полосок.

<FRAMESET ROWS="20%,3*,*"> - описывает три фрэйма, первый из которых занимает 20% площади сверху экрана, второй 3/4 оставшегося от первого фрэйма места (т.е. 60% всей площади окна), а последний 1/4 (т.е. 20% всей площади окна.

<FRAMESET ROWS="*,60%,*"> - аналогично предыдущему примеру.

Тэги <FRAMESET> могут быть вложенными, т.е. например:

<FRAMESET ROWS="50%,50%">

  • <FRAMESET COLS="*,*"
  • </FRAMESET>

</FRAMESET>

Результат данного примера мы рассмотрим позже.

FRAME

<FRAME SRC="url" [NAME="frame_name"] [MARGINWIDTH="nw"] [MARGINHEIGHT="nh"] [SCROLLING=yes|no|auto] [NORESIZE]>

Данный тэг определяет фрэйм внутри контейнера FRAMESET.

SRC="url"

  • Описывает URL документа, который будет отображен внутри ланного фрэйма. Если он отсутствует, то будет отображен пустой фрэйм.

NAME="frame_name"

  • Данный параметр описывает имя фрэйма. Имя фрэйма может быть использовано для определения действия с данным фрэймом из другого HTML-документа или фрэйма (как правило, из соседнего фрэйма этого же документа). Имя обязательно должно начинаться с символа. Содержимое поименованных фрэймов может быть задействовано из других документов при помощи специального атрибута TARGET, описываемого ниже.

MARGINWIDTH="value"

  • Это атрибут может быть использован, если автор документа хочет указать величину разделительных полос между фрэймами сбоку. Значение value указывается в пикселах и не может быть меньше единицы. По умолчанию данное значение зависит от реализации поддержки фрэймов используемым клиентом броузером.

MARGINHEIGHT="value"

  • То же самое, что и MARGINWIDTH, но для верхних и нижних величин разделительных полос.

SCROLLING="yes | no | auto"

  • Этот атрибут позволяет задавать наличие полос прокрутки у фрэйма. Параметр yes указывает, что полосы прокрутки будут в любом случае присутствовать у фрэйма, параметр no наоборот, что полос прокрутки не будет. Auto определяет наличие полос прокрутки только при их необходимости (значение по умолчанию).

NORESIZE

  • Данный атрибут позволяет создавать фрэймы без возможности изменени размеров. По умолчанию, размер фрэйма можно изменить при помощи мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность. Если у одного фрэйма установлен атрибут NORESIZE, то у соседних фрэймов тоже не может быть изменен размер со стороны данного.

NOFRAMES

Данный тэг используется в случае, если вы создаете документ, который может просматриваться как броузерами, поддерживающими фрэймы, так и броузерами, их не поддерживающими. Данный тэг помещяется внутри контейнера FRAMESET, а все, что находится внутри тэгов <NOFRAMES> и </NOFRAMES> игнорируется броузерами, поддерживающими фрэймы.

А теперь на закуску несколько трюков с фреймами:

1. Если ваш сервер поддерживает кэширование можно создать один невидимый фрейм (толщиной в 0 пикселов) и загружать в нем разные картинки чтобы они в последствии моментально грузились в другом документе.

2. А еще можно создать фрейм соответствующий размеру картинки бэкграунда , выключить бордюр и окаймляющую рамку и тогда когда документ загрузится он будет выглядеть как обычный одно-экранный документ.

Владислав Золотухин.


-

Один на один с HTML

Уважаемый Станислав!

Желая изучить язык HTML, я приобрел несколько книг по этой теме, однако разобраться в нем мне очень тяжело. Вы пишите легко и понятно о таких вещах, в которых я ничего не смыслю. Подскажите, пожалуйста, как изучить язык HTML.

Я довольно часто получаю такие письма. Действительно, иногда довольно трудно освоиться с HTML, даже имея на руках первоклассное пособие.

Дело в том, что все эти книги обычно представляют собой пространный пересказ спецификаций языка HTML. Но спецификации пишутся отнюдь не для изучения их начинающими. В HTML есть множество редко используемых элементов - например, некоторые производные элемента HEAD (BASE, ISINDEX), специфические атрибуты некоторых тегов и т.д. Кое-где читателю с серьезным видом рассказывается и о SGML (Standard Generalized Markup Language, стандартный обобщенный язык разметки) - как будто без этого создавать Web-страницы невозможно (лично я бы заставлял авторов таких "руководств" делать HTML-страницы в полном соответствии с их писаниной). Читателю поневоле приходится вникать во все это, не понимая, что все эти тонкости ему пока не нужны. В результате HTML предстает перед новичком этаким громоздким и неповоротливым монстром.

На самом деле это не так. HTML не является языком программирования, это язык разметки текстовых документов. В нем необязательно точное соответствие синтаксису, объявление переменных, описание процедур и классов и прочих атрибутов "обычных" языков программирования. Если вы не укажете такой важный элемент как TITLE или BODY, то броузер просто будет использовать соответствуещее значение по умолчанию. Если вы сделаете синтаксическую ошибку, самое страшное, что случится - искажение вида документа в окне броузера, при котором ошибку легко найти и исправить. Вы никогда не будете мучиться с отладкой текста, как всегда случается при написании более-менее сложных программ на языке программирования. Вы сами не заметите, как начнете с легкостью писать HTML-код самостоятельно.

Чтобы это произошло как можно скорее, попробуйте поступить так. Сохраните из Интернет на жесткий диск своего компьютера какую-нибудь прилично выглядющую страницу (например, эту :-)) или, если вы умеете обращаться с Web-редактором типа MS FrontPage, создайте свою собственную. Главное - она должна содержать все обычно встречающиеся элементы HTML-страницы: текст, картинки, ссылки, таблицы. Теперь откройте эту страницу в каком-нибудь текстовом редакторе (например, том же Блокноте из состава Windows), а также в броузере. Измените какой-нибудь тег или атрибут и сохраните файл. Перейдите в броузер и нажмите кнопку "Обновить" ("Reload"). Вы увидите, как внесенное вами изменение отразилось на виде страницы в броузере. Все это звучит странно, но таким образом вникнуть в HTML очень легко.

Reklama.Ru. The Banner Network.

Статья Станислава Жаркова
Pro.Net.ru


Энциклопедия создания сайтов для начинающих
Version 2.00
New Web-Masters Club

   Перед Вами сборник публикаций лучших веб-дизайнеров и   веб-мастеров Рунета. Все собрано, систематизированно и готово к употреблению. Дерзайте!

Начать изучение

Что нового во второй версии:
- Добавлено "Практическое руководство по HTML" Николая Чувахина;
- Добавлена коллекция JavaScripts;
- Добавлена статья Владислава Золотухина "Фреймы";
- Добавлена статья Виктора Ануприенко " Создание META-тегов"


Энциклопедия создания сайтов для начинающих
Version 2.00
New Web-Masters Club

Этап номер 1. Создание сайта.

Для начала ознакомьтесь с мнением Артемия Лебедева на тему А зачем вам вообще нужно делать страницу? Далее у нас в программе советы чайнику от студии JS. Что делать? - Классический русский вопрос неминуемо встает перед каждым, кто решил создать собственный сайт в Интернет. Итак, с чего начинается создание страницы?

Кстати, Вы уже ознакомились с основами сетевого жаргона, а то дальше мы можем не понять друг друга.

Теперь поговорим о том, как форматировать текст.

Настало время познакомиться с фреймами, но я не рекомендую применять их на своих сайтах.

Для того, чтобы продолжить изучение предмета далее, Вы должны как минимум владеть основами языка HTML. Если Вам не понравился способ описанный в предыдущей статье, прочитайте Практическое руководство по HTML. Подождите, еще не начинайте лепить свою страницу, Вы же не знаете правил хорошего тона в веб дизайне.

Теперь, владея необходимым минимумом для создания страничек, поговорим о рабочем столе и инструментарии веб-мастера. При создании своих сайтов Вы наверняка столкнетесь с необходимостью применения CGI-скриптов.

Вот мы вроде общими силами и создали что-то похожее на сайт или будем создавать (это зависит от Вашего прогресса в веб-мастерстве), теперь нам надо позаботиться о месте, где будет размещен сайт. Но прежде, чем выкладывать свое произведение на сервер, проверьте орфографию.

Могу поспорить у Вас есть свой любимый броузер, которым Вы пользуетесь для просмотра страниц в Интернет, но это не значит, что у всех стоит такой же броузер и, что надо создавать страницы только под него. "Best viewed with" посвящается...

Чтобы сделать свои странички боле интересными, интерактивными и интеллектуальными Вам надо познакомиться с JavaScript'ами.

Перед тем, как закончить первый этап обучения хочу Вам дать несколько полезных советов лично от себя.

И еще, лучше всего учиться на примерах, поэтому путешествуйте по сети, смотрите как создают сайты профессионалы и Вы постепенно тоже приобретете опыт и умение.

Этап номер 2. Реклама сайта.

На этом этапе я хочу представить Вам несколько публикаций.

1. Основы сетевой рекламы. Станислав Жарков.

2. Обмен ссылками. Тимофей Бокарев.

3. Создание META-тегов. Виктор Ануприенко.

Вот, вроде бы и все...

Приссылайте свои предложения, вопросы, комментарии на mail@urcov.vrn.ru

Copyright (c) 1998-1999 New Web-Masters Club
Created by Волынский Александр Николаевич


Java-скрипты
Коллекция взята с сервера студии "JS дизайн"

Этого сборника Вам вполне хватит для первого знакомства с JavaScript'ами.
Нажимающаяся кнопка
Выпадающее меню
Уничтожитель фреймов
Автоматическая пересылка на страничку
Определение типа браузера
Прибамбас к фреймам
Использование буквы я в java-script`е
Дата обновления документа
Свой текст в строке состояния
Самодельная кнопка "назад"
Меняем строку состояния мышкой


-

Основы сетевого жаргона

Логин - идентификатор, используемый для входа в систему

Пассворд - пароль

Гестбук - гостевая книга (от англ. Guestbook)

Хомяк - домашняя страница (от англ. Home Page)

Сервак - сервер (FTP-сервер, веб-сервер)

Лист - список рассылки, используется для оповещения широких масс одним простым письмом (от англ. Mailing List)

Мыло - почта (от англ. Mail)

Мыло - средство для мытья рук (от нем. Der Soap)

Пиксель - квант изображения на мониторе

RTFM - вы это читаете

FAQ - ответы на часто задаваемые вопросы (от англ. Frequently Asked Questions)

Чаво - см. FAQ

Флудить - порождать бессмысленные потоки информации (часто с недобрым умыслом)

Субж, Сабж - тема сообщения (от англ. Subj, Subject)

Мессага - сообщение, письмо (от англ. Message)

Оффтопик - мессага не в кассу

Топик - тема

Клава - клавиатура

Батон - клавиша на клаве (пример: топтать батоны) (от англ. Button)

ИМХО - "по моему скромному мнению" - (от англ. In My Humble Opinion)

ЗЫ - Post Scriptum (буквы ЗЫ находятся на клаве на тех же местах, что и PS)

Файло - файлы

Клик ту контину - (от англ. Click to Continue) - команда "нажать для продолжения"

Машина - компьютер

Камень - процессор (пример: "У меня камушек 233-й")

Веревка - провод, канал соединений с Сетью

Коннект - связь с Интернетом

Залить - закачать файло на сервак

Слить - скачать файло с сервака

Кило, Ка - килобайты.

Метр - мегабайт

Винт - винчестер, жесткий диск

Флопак, флоповод - дисковод, ZIP-диск

Сисадмин - системный администратор

Домен - обычно так называют членораздельный адрес в Интернете. (Возьмем www.design.ru. Тут ".ru" - домен первого уровня, ".design" - второго, "www" - третьего)

Рулез - выражение одобрения (от англ. to Rule - править, рулить) Пишется так: Rulez

Сакс, Суксь - выражение неодобрения (от англ. to Suck - сосать) Пишется так: Sucks

Ламер - полный идиот, дурак, чайник, тупица. Не путать с начинающим пользователем. Ламер опасен и знает это

Локалка - локальная сеть, не обязательно имеющая выход в Интернет

Спам - непрошенная рекламная почта

Директория - папка (а не колония, как можно было подумать)

Дерево - структура расположения директорий на сервере

Корень - первая директория в дереве ("корневая директория")

Тройка - браузер третьей версии ("На тройке проверь" - инструкция Хытымыэльщику, чтобы он проверил сайт на совместимость с браузерами третьей версии)

Четверка - браузер четвертой версии

Пятерка - браузер пятой версии (пока еще не вышел)

Шестерка - шестая модель Жигулей, мальчик на побегушках

Мама, мамка - материнская плата

Трахаться - мучиться с чем-либо

Мозги - память, RAM

Писюха, писюк - компьютер, PC

Комп - компьютер, PC

Прога - программа

Соляра - операционная система Solaris, используемая в компьютерах SUN

Яблочник - пользователь компьютеров Макинтош

Юниксоид - пользователь операционной системы UNIX

Хакер - ламер с завышенным самомнением и полномочиями

Хачить - заниматься хакерством

Крекер - ламер с заниженным самомнением, сдобное печенье

Халтура - работа

Сдохнуть - перестать работать

Аська - программа ICQ

Юзер, Юзверь - пользователь (от англ. User)

Засейвить - сохранить

Фонт - шрифт

Банщик - человек, занимающийся баннерами

Бродилка - браузер

Искалка - поисковая система (напр. Яndex)

Баг - ошибк в программе

Глюк - непонятный сбой в программе (если повторяется, то это уже Баг)

Фича - возможность, функция, черта программы

Редиска - нехороший человек

Циска, киска - ругательства сисадминов ("У нас опять эта @6@%@& Киска повисла" - оправдание любого сбоя у провайдера)

Нетоскоп, Нетшкаф - Netscape (популярный броузер)

Гифец - панибратское от GIF (графический формат, рассмотренный в двух прошлых выпусках)

Маздай - операционная система Windows (от англ. "must die" - "должно умереть")

Винды - то же, что "Маздай"

Сорец (Сорцы) - исходный код, обычно HTML (от англ. Source)

Хытымыэль - от англ. аббрев. HTML - Hyper Text Markup Language (язык разметки гипер-текста)

Мексиканец, негр - малоквалифицированная рабочая сила в создании сайтов (Хытымыэльщик)

Урюк - пользователь (из терминологии А.Морейниса)

Гуру - уважаемый человек, опытный мастер.

Отец - обращение некоторых гуру друг к другу.

Copyright © 1997-1999 Артемий Лебедев
E-mail: tema@tema.ru


Обмен ссылками (reciprocal links).

Сама концепция World Wide Web подразумевает наличие на веб-страницах ссылок на другие сетевые ресурсы. Поэтому обмен ссылками существует практически с момента появления всемирной паутины. Принцип достаточно прост: Вы помещаете у себя ссылку на дружественный сайт (как правило сходный по тематике) и взамен на Ваш ресурс также ставят ссылку.
Текстовая ссылка с положительной аннотацией часто работает гораздо эффективнее, чем баннер. К баннеру все уже привыкли относиться как к рекламе, тогда как текстовая ссылка означает, что человек, разместивший ее у себя, действительно считает данный ресурс заслуживающим внимания своих читателей.

Существует ошибочное мнение, что наличие на Вашей странице ссылок на другие веб-ресурсы приведет к дополнительному оттоку с нее посетителей, которых Вы, как правило, пытаетесь удержать у себя как можно дольше. Да, если Вы заинтересованы исключительно в однократных визитах на свой сервер, возможно ссылки наружу будут только помехой. Но если Вас интересую повторные посещения, то не следует придерживаться подобной точки зрения. Посетитель все равно рано или поздно покинет Ваш сайт, так что в Ваших интересах позаботиться о его следующем месте назначения, как о гарантии повторных визитов к Вам.

Где на своей странице помещать ссылки на другие веб-ресурсы, решать Вам. Обычно создается специальная страница, содержащая подборку ссылок на заданную тематику. Другой способ - помещать ссылки в контексте непосредственно на подходящих для этого страницах. Когда ставите ссылку желательно использовать внутри тега href ключ target=new, например, так:

<a target=new href="http://www.promotion.aha.ru">
Tim promotion - Энциклопедия интернет-рекламы</a>

В этом случае страница, на которую указывает ссылка, откроется в новом окне браузера и пользователь фактически Вашу страницу не покинет.

Грамотно подобранные ссылки на сайты со сходной тематикой, снабженные Вашей аннотацией как специалиста в данной области, создают Вашему веб-ресурсу дополнительную ценность в глазах посетителей. Именно представительная подборка ссылок часто является причиной занесения Вашей страницы в "закладки" посетителей.

С кем стоит и с кем не стоит обмениваться ссылками.

Разумеется, не стоит ставить ссылки на своих прямых конкурентов. Очевидно, что это может увести у Вас существующих или потенциальных клиентов. Но я уверен, что Вы сможете найти ресурсы, посещаемые Вашей целевой аудиторией, но одновременно не представляющие интересов Ваших прямых конкурентов.

Лучшим вариантом здесь являются так называемые "симбиозные ссылки". Например, если Ваша компания является интеренет-провайдером, предоставляющим услуги хостинга веб-страниц, Вы можете разместить ссылки на некоторые студии веб-дизайна, которые эти самые веб-страницы и создадут для Ваших потенциальных клиентов. И наоборот, дизайн-студия может рекламировать у себя на странице Вас как надежного поставщика хостинга для веб-сайтов своих клиентов.

После того, как Вы определитесь, с какого типа сайтами Вам будет выгодно обмениваться ссылками, можно приступать непосредственно к поиску оных.

I. Прежде всего узнайте, кто в настоящий момент уже поставил на Вас ссылки. Если Ваш ресурс по настоящему полезен и популярен, возможно на него ведут не один десяток ссылок, о которых Вы и не подозреваете. Проверить их можно двумя способами:

1 способ (рекомендуемый)
Посмотреть по реферер-логам, которые генеряться на Вашем сервере. Если у Вас нет доступа к подобной статистике, советую незамедлительно договориться со своим провайдером и установить программу для обработки данной статистики. Анализ аксес- и реферер лога является эффективным инструментом анализа посещаемости веб-сайта, поведенческой линии посетителей, эффективности рекламных кампаний и т.д. В ближайшее время я помещу на мой сервер статью, посвященную данному вопросу.

2 способ
Можно воспользоваться поисковыми системами.
Alta Vista - http://www.altavista.digital.com
при запросе link:companyname.ru в результатах поиска Вы получите все проиндексированные системой страницы, содержащие ссылки на сервер www.companyname.ru или на любую из его внутренних страниц.

Excite - http://www.excite.com
Просто наберите в строке поиска Ваш URL (желательно произвести поиск как с использованием в начале www, так и без оного.

Hot Bot - http://www.hotbot.com Наберите в строке поиска Ваш URL. И поменяйте установленный по умолчанию "all of the words" на "links to this URL". Разумеется, данный способ скорее всего не позволит Вам узнать все ссылки на Вашу страницу, т.к. покажет лишь те страницы, что уже проиндексированы данной поисковой системой.

Составьте список сайтов, которые поставили на Вас ссылки. Прежде всего данные страницы могут стать для Вас источником информации о веб-сайтах, сходных с Вашим по тематике. Здесь Вы сможете найти союзников и разыскать своих конкурентов.

Если по анализу реферер-лога Вы увидите, что определенные ресурсы вносят значительную лепту в траффик Вашего сервера, возможно с их владельцами стоит познакомиться поближе. Здесь возможны варианты. Вы можете их просто попросить или предложить деньги, например, за следующее:

· поставить на Вас ссылку на более видном месте;
· отрекламировать Ваш сайт в их списке рассылки или еще где-либо;
· разместить у них Ваши баннеры;
· убрать ссылки на веб-страницы Ваших конкурентов и т.д.

Действуйте по обстановке. Если это не будет ущемлять Ваших интересов (как, например, в случае с конкуренцией) обязательно поставьте ответную ссылку на них.

II. После определения сайтов, уже имеющих ссылки на Вашу страницу, самое время заняться поиском тех, кто еще не совершил сей благородный поступок.
Поиск сайтов с аналогичной тематикой или других веб-ресурсов, где появление ссылки на Ваш веб-сайт желательно (см. выше принцип симбиоза), обычно осуществляется по следующим направлениям:

· через поисковые системы и каталоги;
· на уже известных Вам специализированных серверах (обычно в списках ресурсов);
· на страницах, которые Вы нашли на первом этапе (см. выше);
· конечно, Вы еще можете предложить желающим произвести обмен ссылками со страниц своего сервера, но все подобные предложения, на которые я наталкивался до сих пор в Интернете, выглядели довольно непрофессионально, возможно Вам удастся облечь данное предложение в достаточно респектабельную форму.

III. По результатам поиска составляется и соответствующим образом обрабатывается список содержащий:

· URL сервера;
· его описание, по возможности с оценкой посещаемости, авторитетности и т.д.;
· имя контактного лица и его e-mail.

После того как Вы начнете рассылать письма с предложением по обмену ссылками (или покупки ссылок), в данный список добавляйте информацию о том:

· когда и какого вида был послан запрос;
· какой ответ вы получили (если он вообще был);
· каков статус данного предложения.

Если переговоры (переписка) увенчались успехом и на Ваш веб-сайт поставили ссылку, не стоит забывать о данном ресурсе навсегда. Желательно раз в месяц наведываться и проверять ее наличие, ссылки имеют таинственную способность внезапно исчезать и больше не появляться.

Как Вы будете договариваться с веб-издателями об обмене ссылками, какие аргументы использовать, Вы должны определить сами. Здесь невозможно дать общих рекомендаций, т.к. для каждого конкретного случая необходим индивидуальный подход.
И еще. Если Вы найдете веб-ресурс, который бесспорно будет полезен Вашим читателям, и Вы поместите на него ссылку, даже не требуя взаимности, не забудьте уведомить об этом владельцев этого сайта. Как правило, ни один из веб-издателей не будет возражать, если Вы добавите у себя ссылку на его веб-ресурс. Но советую Вам проявить "излишнюю" вежливость и попросить у него на это разрешение. Очень велика вероятность, что он, увидев ценность Вашего сайта для своих читателей, отплатит Вам тем же.

Web-rings

Другой формой обмена ссылками является организация web-ring.
Сайты определенной тематики - участники веб-кольца ставят ссылки друг на друга по кругу т.е. 1>>2>>3>>..>>N>>1 Данная концепция на мой взгляд не является столь же удобной, как аннотированный список ссылок на страницы, но если подобное "кольцо" существует для сайтов, сходных с Вашим по тематике, желательно стать его участником.
В международной сети существует одноименный сервис http://www.webring.com, который взял на себя хлопоты по поддержке существующих (сейчас их там уже более 40 000) и созданию новых "колец".

Покупка ссылок

Как я упоминал выше, одной из возможностей получить ряд ссылок на свой сервер является их покупка. Соответственно, если Ваша страница является достаточно авторитетным и посещаемым веб-изданием, ориентированным на определенный круг читателей, то Вы можете заработать, помещая у себя ссылки на рекламодателей, готовых за данную услугу платить. Вы можете как самостоятельно заняться поиском и переговорами по данному вопросу, так и поручить хлопоты специализированным службам.

Компания Submit It (купленная недавно баннерной сетью LinkExchange) запустила систему с говорящим за себя названием Click Trade www.clicktrade.com. Данный сервис позволяет рекламодателям находить для себя веб-ресурсы, готовые размещать у себя за деньги ссылки. Оплата идет за количество переходов на сайт рекламодателя по конкретной ссылке. Стоимость перехода определяется непосредственно самим рекламодателем. Комиссию в размере 30% забирает за данный сервис сам Click Trade.

Недавно появилась служба, организующая обмен ссылками между российскими сайтами - PSLink http://pslink.da.ru/, пока правда все выглядит непрофессионально и находится в зачаточном состоянии.

И в заключении вернемся к эффективности бесплатного обмена ссылками. Да, это достаточно кропотливая и длительная работа, но в случае успеха результаты могут превзойти Ваши ожидания. Несколько десятков ссылок с "правильных мест" по своей эффективности могут сравниться со среднемасштабной баннерной кампанией. Причем в отличие от размещения баннеров, платить Вам за это не придется, и работать они будут на Вас постоянно. А с ростом популярности веб-ресурсов, поставивших на Вас ссылки, их эффективность будет неуклонно возрастать.

Тимофей Бокарев.


Promo.Ru - Обмен ссылками (reciprocal links)

РЕСУРСЫ СЕТИ
Журнал "ClickZ".
Целиком посвящен сетевой рекламе. Обновляется практически ежедневно. Есть возможность получать каждый новый выпуск по e-mail
Microscope: Best Ads on the Web.
Журнал посвящен обсужеднию баннеров, использовавшихся в той либо иной рекламной кампании.

Virtual PROMOTE.
Ресурсы для людей, желающих раскрутить свой веб-сайт, делать деньги в сети и т.д. Информация излагается в доступной для начинающих форме. При данном сервере издается еженедельная email газета.
Очень полезный ресурс, особенно для начинающих.
Wilson Web.
Сервер содержит самую большую из тех, что я видел, подборку материалов о сетевой рекламе, сетевом бизнесе и т.д. Имеет как свои ресурсы, так и множество система- тизированных ссылок на другие сервера. Поддерживает несколько списков рассылки, веб-форум и т.д.
Internet Advertising Bureau.
Законодатели стандартов в мире инетернет рекламы. Данной компанией проводятся различного вида исследования по эффективности того или иного вида сетевой рекламы, устанавливаются методики для измерения траффика, аудитории веб-сайтов и т.д.
Информация рассчитана и будет полезна для профессионалов
Banner Advertising (Mark J. Welch)
Гигантский список ссылок на ресурсы, посвященные баннерной рекламе:
- агентства по покупке/продаже рекламы в сети;
- системы обмена баннерами;
- программы для кручения баннеров
и мное другое.
www.reklama.ru. The Banner Network.

Обмен ссылками (reciprocal links).

Сама концепция World Wide Web подразумевает наличие на веб-страницах ссылок на другие сетевые ресурсы. Поэтому обмен ссылками существует практически с момента появления всемирной паутины. Принцип достаточно прост: Вы помещаете у себя ссылку на дружественный сайт (как правило сходный по тематике) и взамен на Ваш ресурс также ставят ссылку.
Текстовая ссылка с положительной аннотацией часто работает гораздо эффективнее, чем баннер. К баннеру все уже привыкли относиться как к рекламе, тогда как текстовая ссылка означает, что человек, разместивший ее у себя, действительно считает данный ресурс заслуживающим внимания своих читателей.

Существует ошибочное мнение, что наличие на Вашей странице ссылок на другие веб-ресурсы приведет к дополнительному оттоку с нее посетителей, которых Вы, как правило, пытаетесь удержать у себя как можно дольше. Да, если Вы заинтересованы исключительно в однократных визитах на свой сервер, возможно ссылки наружу будут только помехой. Но если Вас интересую повторные посещения, то не следует придерживаться подобной точки зрения. Посетитель все равно рано или поздно покинет Ваш сайт, так что в Ваших интересах позаботиться о его следующем месте назначения, как о гарантии повторных визитов к Вам.

Где на своей странице помещать ссылки на другие веб-ресурсы, решать Вам. Обычно создается специальная страница, содержащая подборку ссылок на заданную тематику. Другой способ - помещать ссылки в контексте непосредственно на подходящих для этого страницах. Когда ставите ссылку желательно использовать внутри тега href ключ target=new, например, так:

<a target=new href="http://www.promotion.aha.ru">
Tim promotion - Энциклопедия интернет-рекламы</a>

В этом случае страница, на которую указывает ссылка, откроется в новом окне браузера и пользователь фактически Вашу страницу не покинет.

Грамотно подобранные ссылки на сайты со сходной тематикой, снабженные Вашей аннотацией как специалиста в данной области, создают Вашему веб-ресурсу дополнительную ценность в глазах посетителей. Именно представительная подборка ссылок часто является причиной занесения Вашей страницы в "закладки" посетителей.

С кем стоит и с кем не стоит обмениваться ссылками.

Разумеется, не стоит ставить ссылки на своих прямых конкурентов. Очевидно, что это может увести у Вас существующих или потенциальных клиентов. Но я уверен, что Вы сможете найти ресурсы, посещаемые Вашей целевой аудиторией, но одновременно не представляющие интересов Ваших прямых конкурентов.

Лучшим вариантом здесь являются так называемые "симбиозные ссылки". Например, если Ваша компания является интеренет-провайдером, предоставляющим услуги хостинга веб-страниц, Вы можете разместить ссылки на некоторые студии веб-дизайна, которые эти самые веб-страницы и создадут для Ваших потенциальных клиентов. И наоборот, дизайн-студия может рекламировать у себя на странице Вас как надежного поставщика хостинга для веб-сайтов своих клиентов.

После того, как Вы определитесь, с какого типа сайтами Вам будет выгодно обмениваться ссылками, можно приступать непосредственно к поиску оных.

I. Прежде всего узнайте, кто в настоящий момент уже поставил на Вас ссылки. Если Ваш ресурс по настоящему полезен и популярен, возможно на него ведут не один десяток ссылок, о которых Вы и не подозреваете. Проверить их можно двумя способами:

1 способ (рекомендуемый)
Посмотреть по реферер-логам, которые генеряться на Вашем сервере. Если у Вас нет доступа к подобной статистике, советую незамедлительно договориться со своим провайдером и установить программу для обработки данной статистики. Анализ аксес- и реферер лога является эффективным инструментом анализа посещаемости веб-сайта, поведенческой линии посетителей, эффективности рекламных кампаний и т.д. В ближайшее время я помещу на мой сервер статью, посвященную данному вопросу.

2 способ
Можно воспользоваться поисковыми системами.
Alta Vista - http://www.altavista.digital.com
при запросе link:companyname.ru в результатах поиска Вы получите все проиндексированные системой страницы, содержащие ссылки на сервер www.companyname.ru или на любую из его внутренних страниц.

Excite - http://www.excite.com
Просто наберите в строке поиска Ваш URL (желательно произвести поиск как с использованием в начале www, так и без оного.

Hot Bot - http://www.hotbot.com Наберите в строке поиска Ваш URL. И поменяйте установленный по умолчанию "all of the words" на "links to this URL". Разумеется, данный способ скорее всего не позволит Вам узнать все ссылки на Вашу страницу, т.к. покажет лишь те страницы, что уже проиндексированы данной поисковой системой.

Составьте список сайтов, которые поставили на Вас ссылки. Прежде всего данные страницы могут стать для Вас источником информации о веб-сайтах, сходных с Вашим по тематике. Здесь Вы сможете найти союзников и разыскать своих конкурентов.

Если по анализу реферер-лога Вы увидите, что определенные ресурсы вносят значительную лепту в траффик Вашего сервера, возможно с их владельцами стоит познакомиться поближе. Здесь возможны варианты. Вы можете их просто попросить или предложить деньги, например, за следующее:

· поставить на Вас ссылку на более видном месте;
· отрекламировать Ваш сайт в их списке рассылки или еще где-либо;
· разместить у них Ваши баннеры;
· убрать ссылки на веб-страницы Ваших конкурентов и т.д.

Действуйте по обстановке. Если это не будет ущемлять Ваших интересов (как, например, в случае с конкуренцией) обязательно поставьте ответную ссылку на них.

II. После определения сайтов, уже имеющих ссылки на Вашу страницу, самое время заняться поиском тех, кто еще не совершил сей благородный поступок.
Поиск сайтов с аналогичной тематикой или других веб-ресурсов, где появление ссылки на Ваш веб-сайт желательно (см. выше принцип симбиоза), обычно осуществляется по следующим направлениям:

· через поисковые системы и каталоги;
· на уже известных Вам специализированных серверах (обычно в списках ресурсов);
· на страницах, которые Вы нашли на первом этапе (см. выше);
· конечно, Вы еще можете предложить желающим произвести обмен ссылками со страниц своего сервера, но все подобные предложения, на которые я наталкивался до сих пор в Интернете, выглядели довольно непрофессионально, возможно Вам удастся облечь данное предложение в достаточно респектабельную форму.

III. По результатам поиска составляется и соответствующим образом обрабатывается список содержащий:

· URL сервера;
· его описание, по возможности с оценкой посещаемости, авторитетности и т.д.;
· имя контактного лица и его e-mail.

После того как Вы начнете рассылать письма с предложением по обмену ссылками (или покупки ссылок), в данный список добавляйте информацию о том:

· когда и какого вида был послан запрос;
· какой ответ вы получили (если он вообще был);
· каков статус данного предложения.

Если переговоры (переписка) увенчались успехом и на Ваш веб-сайт поставили ссылку, не стоит забывать о данном ресурсе навсегда. Желательно раз в месяц наведываться и проверять ее наличие, ссылки имеют таинственную способность внезапно исчезать и больше не появляться.

Как Вы будете договариваться с веб-издателями об обмене ссылками, какие аргументы использовать, Вы должны определить сами. Здесь невозможно дать общих рекомендаций, т.к. для каждого конкретного случая необходим индивидуальный подход.
И еще. Если Вы найдете веб-ресурс, который бесспорно будет полезен Вашим читателям, и Вы поместите на него ссылку, даже не требуя взаимности, не забудьте уведомить об этом владельцев этого сайта. Как правило, ни один из веб-издателей не будет возражать, если Вы добавите у себя ссылку на его веб-ресурс. Но советую Вам проявить "излишнюю" вежливость и попросить у него на это разрешение. Очень велика вероятность, что он, увидев ценность Вашего сайта для своих читателей, отплатит Вам тем же.

Web-rings

Другой формой обмена ссылками является организация web-ring.
Сайты определенной тематики - участники веб-кольца ставят ссылки друг на друга по кругу т.е. 1>>2>>3>>..>>N>>1 Данная концепция на мой взгляд не является столь же удобной, как аннотированный список ссылок на страницы, но если подобное "кольцо" существует для сайтов, сходных с Вашим по тематике, желательно стать его участником.
В международной сети существует одноименный сервис http://www.webring.com, который взял на себя хлопоты по поддержке существующих (сейчас их там уже более 40 000) и созданию новых "колец".

Покупка ссылок

Как я упоминал выше, одной из возможностей получить ряд ссылок на свой сервер является их покупка. Соответственно, если Ваша страница является достаточно авторитетным и посещаемым веб-изданием, ориентированным на определенный круг читателей, то Вы можете заработать, помещая у себя ссылки на рекламодателей, готовых за данную услугу платить. Вы можете как самостоятельно заняться поиском и переговорами по данному вопросу, так и поручить хлопоты специализированным службам.

Компания Submit It (купленная недавно баннерной сетью LinkExchange) запустила систему с говорящим за себя названием Click Trade www.clicktrade.com. Данный сервис позволяет рекламодателям находить для себя веб-ресурсы, готовые размещать у себя за деньги ссылки. Оплата идет за количество переходов на сайт рекламодателя по конкретной ссылке. Стоимость перехода определяется непосредственно самим рекламодателем. Комиссию в размере 30% забирает за данный сервис сам Click Trade.

Недавно появилась служба, организующая обмен ссылками между российскими сайтами - PSLink http://pslink.da.ru/, пока правда все выглядит непрофессионально и находится в зачаточном состоянии.

И в заключении вернемся к эффективности бесплатного обмена ссылками. Да, это достаточно кропотливая и длительная работа, но в случае успеха результаты могут превзойти Ваши ожидания. Несколько десятков ссылок с "правильных мест" по своей эффективности могут сравниться со среднемасштабной баннерной кампанией. Причем в отличие от размещения баннеров, платить Вам за это не придется, и работать они будут на Вас постоянно. А с ростом популярности веб-ресурсов, поставивших на Вас ссылки, их эффективность будет неуклонно возрастать.
Для Вашего удобства, на данном сервере я создал доску объявлений и каталог для желающих обмениваться с веб-сайтами сходных тематик баннерами или текстовыми ссылками. Вы можете найти здесь партнеров или разместить свое объявление в каталоге.

Кстати, я был бы очень признателен, если бы Вы поместили у себя ссылку на мою страницу :)


Создание Meta-тегов

Meta-теги и их использование.
Поисковые серверы при регистрации Web-сервера, сайта или страницы используют информацию, хранящуюся в специальных тегах МЕТА, которые помещаются между тегами и большинство начинающих Web-мастеров и Web-дизайнеров не уделяют особого внимания этим тегам - и зря. Теги МЕТА не видны при просмотре документа и заметно увеличивают его размер, однако без них не обойтись. Рекомендации по составлению Мета-тегов.
Правильность составления МЕТА тегов делает возможным, чтобы ваш сайт было легко отыскать при помощи поисковых систем среди огромного числа других сайтов! Для этого необходимо следовать следующим рекомендациям:
1. Длина содержимого тегов МЕТА "desctiptions" не должна превышать 200 символов, a "keywords" - 1000 символов. Это связано с тем, что поисковые серверы, как правило, используют именно такие величины при индексировании информации о вашем сайте. Можно получить отрицательный результат, если поисковые машины отбросят часть описания, превышающего установленные нормы, в результате чего в каталог попадет не вся желаемая информация, либо сервер просто отвергнет регистрацию вашего сайта.
2. Нужно включить все наиболее часто используемые в вашем сайте термины и их синонимы в тег "desctiptions". Можете включить и термины, не имеющие отношения к вашим страницам, однако в Internet такое поведение считается некорректным. В список ключевых слов можно вставлять и фразы. В этом случае у вашего сайта повышается шанс попасть в самое начало списка, выданного поисковым сервером (в случае совпадения фразы с той, что вводит пользователь).
3. Для увеличения рейтинга сайта и попадания его в верхнюю часть поискового списка необходимо каждый термин, включаемый в описание, повторять около 3 раз. Поисковые машины, как правило, работают с тегами МЕТА, а в случае их отсутствия - уже с содержимым страницы. Иногда это приводит к появлению сайта в списке top 10, но может привести ик отрицательному результату (перед регистрацией проверьте поисковую машину, дав запрос и просмотрев ключевые слова у сайтов, стоящих на верхних позициях)
4. Используйте в описаниях и списке терминов как можно больше синонимов.
5. Не используйте в описаниях и в списке терминов понятия и слова, слабо связанные друг с другом.

Cостав МЕТА-тегов
 1) Для того, чтобы при просмотре документа броузер брал свежую версию документа, а не версию из кеша используется

<META HTTP-EQUIV="Expires"
Content="Mon, 28 Mar 1999 00:00:01 GMT">

2) Для определения броузером языка, на котором написана страница используется

<META HTTP-EQUIV="Content-Type" Content="text/html;
Charset=Windows-1251">

3) Если неопытный Web-мастер скопирует Вашу страницу, в которой оставит следущий тег, то при заходе на эту страницу броузер автоматически перейдет на Вашу страницу

<META HTTP-EQUIV="Refresh" Content="1;
 url=http://адрес_вашей_страницы">

4) Для указания имени автора и дополнительной информации о нем используется

<META Name="autor" Content="Ваши Ф.И.О., E-Mail...">

5) Для указания авторких прав используется

<META Name="copyright" Content="Ваша_фирма...">

6) Для указания ключевых слов и терминов используется

<META Name="keywords" Content="Ваши_Ключевые слова">

7) Для указания краткого описания используется

<META Name="description"
Content="Описание_Вашей_Страницы">

Полагаясь на собственные исследования в этой области, а также на профессиональных разработчиков в этой области мы рекомендуем вам при наличии большого количества страниц создать теги мета-информации с различным содержанием, описывающем содержания данной конкретной страницы или раздела.

Итак, создаем Мета-теги

Необходимо заполнить все поля
Название страницы
Автор страницы
Электронный адрес
Ключевые слова
(через запятую)
Описание страницы

Остается только скопировать созданный код и вставить его между тегами <HEAD> и </HEAD> в код вашей странички.

(c)Автор: Виктор Ануприенко
StudioVGA


Проверка орфографии

В этой заметке я хочу затронуть такую больную для российского Интернет тему, как безграмотность текстов, его, этот самый Интернет, наполняющих.

Сообщения по почте, в чатах и т.д. - личное дело каждого. Нравится вам писать "как зделать анемацию в фотошопе" - пишите, хотя лично мне не нравится читать безграмотный текст. Однако в последнее время орфографические и грамматические ошибки переползли и на Web-страницы, причем даже на крупные сайты, оформляемые и поддерживаемые профессиональными дизайн-студиями. Так что не думайте, что безграмотные работы делает только молодой неопытный народ, который еще в школе не доучился.

Конечно, избежать опечаток в многокилобайтных текстах очень тяжело. Чего кривить душой, у меня они тоже встречаются. Но безграмотные графические логотипы, баннеры и т.д - это удар по престижу и репутации не только дизайнера, но и заказчика. Почему - я думаю, объяснять не надо, не маленькие.

Напоследок - безграмотный текст, взятый с одного сайта той же тематики, что и Pro.Net.ru. Орфография сохранена, благо есть Copy+Paste.

20.03/99 г. Я открыл раздел "Web дизайнерам". Посчитал, что он необходим для всех будь вы продвинутый пользователь или простой. В нём вы узнаиете какие секреты скрываются в HTML языка.

19.03/99 г. Привет всем ! Скоро появится раздел для Web дизайнеров и всех кто связан с ним. И это ещё не всё. Откроется раздел баннеры как вы понимаите буду менятся баннерами 468х60. Спешите чей баннер будет первым я помещу его на главную страницу.

11.03/99 г.Люди прогалосуйте пожалуй ста за меня В Золотом УРЛ. с право вверху.

Предлюжение для вас

Я вам предлогаю поменятся баннерами 468х60 и 88х31 в замен на размещения моей кнопки на вашем сайте. Если у вас нет сайта, то обратитесь к студии Белик Романа В этой студии вас обслужат быстро! И ваш сайт будет качественным и не дорогим. Вы можите убидится на напримери моего сайта

Раньше я думал, что так не бывает. Оказывается, бывает. И это не провокация - автор допускает такие же ошибки и в письмах e-mail.

Reklama.Ru. The Banner Network.

Статья Станислава Жаркова
Pro.Net.ru


Правила хорошего тона в веб дизайне

Желательно чтобы сайт нормально выглядел как в Netskap`е так и в Internet Explorer`е и в разных режимах монитора (640X480, 800X600, 1024X784). Правда я считаю, что рассчитывать на пользователей с разрешением 640X480 неверно, потому что большинство работает в 800X600 и все больше переходит к 1024X768.

Не стоит использовать на страничке много анимации или JAV`ы, у некоторых одна картинка или JAVA аплет грузится более минуты. Также не очень здорово когда на страничке установлены часы или бегущая строка.

Еще один очень важный момент - это использование правильных цветов на страничке. Текст должен быть контрастным и прекрасно читаться.

При использовании «BACKGROUND`а» необходимо установить цвет под слойки (BGCOLOR) похожим на цвет картинки используемой в качестве «BACKGROUND`а»

Что касается фреймов, то тут есть несколько мнений. Я считаю что они только добавляют удобства, если используются с умом. Если вы используете фреймы для упрощения навигации по серверу, не используйте в управляющем фрейме текстовые ссылки, т.к. у разных пользователей установлен неодинаковый регистр шрифта и у некоторых текст может не поместиться в фрейм, а это очень неприятно. Также следует следить, чтобы ссылки открывались в нужном фрейме или в новом окне браузера.

Не желательно использовать значки типа «Under Construction», хороший сайт должен и так постоянно обновляться.

Если вы создаете корпоративный сайт не используйте картинки из бесплатных коллекций

Чтобы расположить все на страничке подобающим образом, хорошо использовать таблицу со значением BORDER=0. Для создания отступов можно использовать прозрачный gif размером 1x1 пиксель используя теги HSPACE и VSPACE для достижения нужной цели.

Желательно предложить альтернативную версию сайта - без наворотов для пользователей старых браузеров и низкоскоростных соединений.


Тепленькое местечко

Каждый независимый вебмастер желает бесплатно иметь в своем распоряжении настоящий полноценный Web-сервер - с поддержкой CGI, и прочими полезными прибамбасами. Однако это возможно, в основном, в силу личных отношений с главным системным администратором провайдера. Если вы не учились с ним в одном классе школы или не пьете с ним пиво по пятницам, то вам, скорее всего, приходится довольствоваться бесплатным хостингом на каком-нибудь Chat.Ru - с неизбежными в таком случае сбоями сервера, отсутствием технической поддержки и убогим сервисом.

В этой заметке я поделюсь одним хорошим способом, как заиметь себе роскошный веб-сервер абсолютно бесплатно, даже если вы не завели себе нужных связей.

В России существует значительное число серверов, которые, не занимаясь вебхостингом профессионально, с удовольствием размещают у себя частные тематические проекты. Если вы создали интересный (причем не обязательно популярный) сайт, то обратитесь к администрации одного из таких серверов - если ваш проект действительно интересен не только вам одному, шансы на успех довольно высоки. Вы получите все то, за что обычно платят десятки долларов в месяц - несколько десятков мегабайт дискового пространства, CGI, SSI, почтовый ящик, статистику сервера и т.п. Возможно, вам дадут доменное имя типа проект.имя_провайдера.ru. О выделении такого поддомена, кстати, можете попросить с самого начала - провайдеру оно не стоит ни копейки.

Возможно, провайдер в обмен попросит вас разместить на сайте его рекламный баннер или просто ссылку типа "Размещено на сервере..." Но это как договоритесь. В конце концов, упорствовать в отношении рекламы не стоит - хотя бы чтобы не казаться совсем "халявщиком" на чужом сервере.

Напоследок - несколько ссылок на таких добрых людей в российском Интернет (на начало февраля 1999 г.):

Чертовы Кулички
www.list.ru
www.uka.ru
www.lgg.ru

Reklama.Ru. The Banner Network.

Статья Станислава Жаркова
Pro.Net.ru


Руководство по HTML, оглавление

Николай Чувахин

Практическое руководство по HTML
Печатается с разрешения автора

Глава 1. Вводные замечания

  • Для чего нужно это руководство?
  • Что такое HTML?
  • Что Вам понадобится для освоения HTML?
  • Необходимое отступление о редакторах HTML

Глава 2. Наш первый HTML-документ

  • Как устроен HTML-документ
  • Обязательные метки
    • <html> и </html>
    • <head> и </head>
    • <title> и </title>
    • <body> и </body>
    • <H1> и </H1> — <H6> и </H6>
    • <P> и </P>

Глава 3. Внутри абзаца

  • Непарные метки
    • Конец строки: <BR>
    • Горизонтальная линия: <HR>
    • &-последовательности
    • Комментарии
  • Форматирование шрифта
    • Физические стили
    • Логические стили

Глава 4. Организация текста внутри документа

  • Ненумерованные списки: <UL> и </UL>
  • Нумерованные списки: <OL> и </OL>
  • Списки определений: <DL> и </DL>
  • Вложенные списки
  • Форматированный текст: <PRE> и </PRE>
  • Текст с отступом: <BLOCKQUOTE> и </BLOCKQUOTE>

Глава 5. За пределами HTML-файла

  • Связывание
  • Изображения в HTML-документе

Глава 6. Тайное становится явным, или Видимое действие невидимых меток

  • Цветовая гамма HTML-документа
  • Заголовок HTML-документа: что в нем может быть интересного?

Глава 7. Таблицы

  • Для чего нужны таблицы?
  • Как устроена таблица

Глава 8. Формы

  • Для чего нужны формы?
  • Как устроена форма
    • Простейшая форма
    • Как форма собирает данные
  • Маленькая хитрость, или Как отправить форму почтой

© H. Чувахин, 1997


Руководство по HTML, глава 1

Практическое руководство по HTML

© Николай Чувахин, 1997

Глава 1. Вводные замечания

Для чего нужно это руководство?

Это руководство задумано как учебник для тех, кто хочет публиковать документацию любого рода на глобальной компьютерной сети Интернет. Насколько велика Интернет, точно не знает никто. Ходят слухи, что в 1996 году число крупных машин (серверов) и локальных сетей, подключенных к Интернет, перевалило за 10 миллионов. Точное число пользователей просто никому не известно. Известно только, что оно очень велико — несколько сот миллионов человек по всему миру. Чтобы опубликовать документ (здесь и далее под документом понимается файл, содержащий некоторую информацию) на Интернет, достаточно поместить его на сервер, постоянно подключенный к Интернет и способный общаться с другими серверами с помощью протокола передачи гипертекстов (HyperText Transfer Protocol, или http://). Совокупность таких серверов получила название "всемирной паутины" (World Wide Web, или WWW). Разработку документов, однако, можно проводить и на компьютере, не имеющем выхода в Интернет. Автор, например, разрабатывал Руководство в текстовом процессоре Microsoft Word 2.0, а затем перенес в формат HTML и разместил на сервере Yellow Internet (http://www.yi.com/home/ChuvakhinNikolai/). Любой желающий может бесплатно разместить на этом сервере свои файлы суммарным объемом до двух мегабайт. Автор приветствует распространение Руководства в печатном и электронном виде при соблюдении трех условий:

  1. Руководство распространяется целиком и бесплатно.
  2. Руководство не подвергается модификации без согласия автора.
  3. Руководство распространяется с указанием следующих сведений об авторе: имя — Николай Чувахин, адрес электронной почты — nc@iname.com, сервер Интернет — http://www.yi.com/home/ChuvakhinNikolai/.

Любое отступление от указанных выше условий должно быть предварительно обсуждено с автором. Автор будет очень рад узнать мнение читателей о качестве его работы. Очень приятно было бы получить предложения о дальнейшем совершенствовании Руководства и сотрудничестве по его распространению (включая предложения об издании в виде книги).

Что такое HTML?

Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.0 и 3.2. Текущую спецификацию HTML всегда можно найти на сервере W3C (http://www.w3.org/). Спецификация 3.2, датированная 11 января 1997 года, находится на http://www.w3.org/pub/WWW/TR/REC-html32.html. Изложение этой спецификации на русском языке будет размещено (если уже не размещено) на http://www.yi.com/home/ChuvakhinNikolai/html32.htm. Все, о чем написано в Руководстве, будет гарантированно работать с программным обеспечением, поддерживающим любую известную на сегодня спецификацию HTML. Естественно, для этого пришлось опустить некоторые детали, которые описаны не во всех спецификациях или описаны в разных спецификациях по-разному. Однако могу Вас уверить, что Ваши документы будут полностью работоспособными и вполне приличными по внешнему виду.

Что Вам понадобится для освоения HTML?

Для освоения HTML по этому Руководству Вам понадобятся две вещи:

  1. Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов. Мне лично очень нравится Netscape Navigator, поэтому именно его команды я и буду приводить, описывая операции с браузером.
  2. Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad.

Мы будем использовать текстовый редактор для подготовки HTML-файлов, а браузер — как инструмент контроля за сделанным. Свои первые HTML-файлы Вы будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернет. При этом один и тот же *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape Navigator. Сохранив изменения в Notepad, просто нажмите кнопку Reload ("перезагрузить") в Netscape Navigator, чтобы увидеть эти изменения реализованными в HTML-документе.

Необходимое отступление о редакторах HTML

В настоящее время широко используются два типа редакторов HTML:

  1. Редакторы типа "что видишь, то и получишь" (Netscape Navigator Gold, Microsoft Front Page). Пользователь не видит "внутренностей" документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML-документы.
  2. Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.

Как я уже говорил, нам для изучения HTML понадобится только текстовый редактор и браузер. Когда Вы освоите HTML в минимальной степени, Вы сами сможете подобрать себе редактор по вкусу.

[ К следующей главе | К оглавлению | К предыдущей главе ]


Руководство по HTML, глава 2

Практическое руководство по HTML

© Николай Чувахин, 1997

Глава 2. Наш первый HTML-документ

Как устроен HTML-документ

HTML-документ — это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Вот самый простой HTML-документ:

<html>
     <head>
          <title>
               Пример 1
          </title>
     </head>
     <body>
          <H1>
               Привет!
          </H1>
          <P>
               Это простейший пример HTML-документа.
          </P>
          <P>
               Этот *.htm-файл может быть одновременно открыт
               и в Notepad, и в Netscape. Сохранив изменения в Notepad,
               просто нажмите кнопку Reload ('перезагрузить') в Netscape,
               чтобы увидеть эти изменения реализованными в HTML-документе.
          </P>
     </body>
</html>

Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:

<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape.
Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить')
в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.</P>
</body>
</html>

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается "тэг"). Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/". Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково. Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.

Обязательные метки

<html> ... </html>

Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.

<head> ... </head>

Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.

<title> ... </title>

Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

<body> ... </body>

Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.

<H1> ... </H1> — <H6> ... </H6>

Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.

<P> ... </P>

Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац. Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:

<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>

или

<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>

Подытожим все, что мы знаем, с помощью примера 2:

<html>
<head>
<title>Пример 2</title>
</head>
<body>
<H1 ALIGN=CENTER>Привет!</H1>
<H2>Это чуть более сложный пример HTML-документа</H2>
<P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P>
<P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P>
</body>
</html>

С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.

[ К следующей главе | К оглавлению | К предыдущей главе ]


Руководство по HTML, глава 3

Практическое руководство по HTML

© Николай Чувахин, 1997

Глава 3. Внутри абзаца

Непарные метки

В этом разделе мы поговорим о метках, которые не подчиняются двум основным правилам HTML: все они непарные, а некоторые (так называемые &-последовательности) к тому же должны вводиться только маленькими буквами.

<BR>

Эта метка используется, если необходимо перейти на новую строку, не прерывая абзаца. Очень удобно при публикации стихов.

<html>
<head>
<title>Пример 3</title>
</head>
<body>
<H1>Стих</H1>
<H2>Автор неизвестен</H2>
<P>Однажды в студеную зимнюю пору<BR>
Сижу за решеткой в темнице сырой.<BR>
Гляжу - поднимается медленно в гору<BR>
Вскормленный в неволе орел молодой.</P>
<P>И шествуя важно, в спокойствии чинном,<BR>
Мой грустный товарищ, махая крылом,<BR>
В больших сапогах, в полушубке овчинном,<BR>
Кровавую пищу клюет под окном.</P>
</body> </html>

<HR>

Метка <HR> описывает вот такую горизонтальную линию:

Метка может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана). В примере 4 приведена небольшая коллекция горизонтальных линий.

<html>
<head>
<title>Пример 4</title>
</head>
<body>
<H1>Коллекция горизонтальных линий</H1>
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=4 WIDTH=50%><BR>
<HR SIZE=8 WIDTH=25%><BR>
<HR SIZE=16 WIDTH=12%><BR>
</body>
</html>

&-последовательности

Поскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ "<", когда встречает в тексте последовательность &lt; (по первым буквам английских слов less than — меньше, чем). Знак ">" кодируется последовательностью &gt; (по первым буквам английских слов greater than — больше, чем). Символ "&" (амперсанд) кодируется последовательностью &amp; Двойные кавычки (") кодируются последовательностью &quot; Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Использование меток типа &QUOT; или &AMP; не допускается. Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей.

Комментарии

Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев.

<!-- Это комментарий -->

Форматирование шрифта

HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру. Поясним это на примерах.

Физические стили

Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между метками <B> и </B>, будет написано жирным шрифтом. Текст между метками <I> и </I> будет написан наклонным шрифтом. Несколько особняком стоит пара меток <TT> и </TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.

Логические стили

При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.

<EM> ... </EM>

От английского emphasis — акцент.

<STRONG> ... </STRONG>

От английского strong emphasis — сильный акцент.

<CODE> ... </CODE>

Рекомендуется использовать для фрагментов исходных текстов.

<SAMP> ... </SAMP>

От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.

<KBD> ... </KBD>

От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.

<VAR> ... </VAR>

От английского variable — переменная. Рекомендуется использовать для написания имен переменных.

Пример

Подытожим наши знания о логических и физических стилях с помощью примера 5. Заодно Вы сможете увидеть, как Ваш браузер показывает те или иные логические стили.

<html>
<head>
<title>Пример 5</title>
</head>
<body>
<H1>Шрифтовое выделение фрагментов текста</H1>
<P>Теперь мы знаем, что фрагменты текста можно выделять
<B>жирным</B> или <I>наклонным</I> шрифтом. Кроме того, можно
включать в текст фрагменты с фиксированной шириной символа
<TT>(имитация пишущей машинки)</TT></P>
<P>Кроме того, существует ряд логических стилей:</P>
<P><EM>EM - от английского emphasis - акцент </EM><BR>
<STRONG>STRONG - от английского strong emphasis - сильный акцент </STRONG><BR>
<CODE>CODE - для фрагментов исходных текстов</CODE><BR>
<SAMP>SAMP - от английского sample - образец </SAMP><BR>
<KBD>KBD - от английского keyboard - клавиатура</KBD><BR>
<VAR>VAR - от английского variable - переменная </VAR></P>
</body>
</html>

[ К следующей главе | К оглавлению | К предыдущей главе ]


Руководство по HTML, глава 4

Практическое руководство по HTML

© Николай Чувахин, 1997

Глава 4. Организация текста внутри документа

HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле. Разберем все по порядку.

Ненумерованные списки: <UL> ... </UL>

Текст, расположенный между метками <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <LI>. Например, чтобы создать вот такой список:

  • Иван;
  • Данила;
  • белая кобыла

необходим вот такой HTML-текст:

<UL>
<LI>Иван;
<LI>Данила;
<LI>белая кобыла
</UL>

Обратите внимание: у метки <LI> нет парной закрывающей метки.

Нумерованные списки: <OL> ... </OL>

Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры. Если слегка модифицировать наш предыдущий пример:

<OL>
<LI>Иван;
<LI>Данила;
<LI>белая кобыла
</OL>

получится вот такой список:

  1. Иван;
  2. Данила;
  3. белая кобыла

Списки определений: <DL> ... </DL>

Список определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:

<DL>
<DT>HTML
<DD>Термин HTML (HyperText Markup Language) означает 'язык
маркировки гипертекстов'. Первую версию HTML разработал сотрудник
Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
<DT>HTML-документ
<DD>Текстовый файл с расширением *.htm (Unix-системы могут
содержать файлы с расширением *.html).
</DL>

Этот фрагмент будет выведен на экран следующим образом:

HTML
Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
HTML-документ
Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).

Обратите внимание: точно так же, как метки <LI>, метки <DT> и <DD> не имеют парных закрывающих меток. Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL COMPACT>. Например, вот такой фрагмент HTML-текста:

<DL COMPACT>
<DT>А
<DD>Первая буква алфавита
<DT>Б
<DD>Вторая буква алфавита
<DT>В
<DD>Третья буква алфавита
</DL>

будет выведен на экран примерно так:

А
Первая буква алфавита
Б
Вторая буква алфавита
В
Третья буква алфавита

Вложенные списки

Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует. Вложенные списки очень удобны при подготовке разного рода планов и оглавлений. Наши знания о списках можно вкратце свести в пример 6:

<html>
<head>
<title>Пример 6</title>
</head>
<body>
<H1>HTML поддерживает несколько видов списков </H1>
<DL>
<DT>Ненумерованные списки
<DD>Элементы ненумерованного списка выделяются специальным
символом и отступом слева:
<UL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</UL>
<DT>Нумерованные списки
<DD>Элементы нумерованного списка выделяются отступом слева, а
также нумерацией:
<OL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</OL>
<DT>Списки определений
<DD>Этот вид списков чуть сложнее, чем два предыдущих, но и
выглядит более эффектно.
<P>Помните, что списки можно встраивать один в другой, но не
следует закладывать слишком много уровней вложенности. </P>
<P>Обратите внимание, что внутри элемента списка может находиться
несколько абзацев. Все абзацы при этом будут иметь одинаковое
левое поле. </P>
</DL>
</body>
</html>

Форматированный текст: <PRE> ... </PRE>

В самом начале мы говорили о том, что браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение. Текст, заключенный между метками <PRE> и </PRE> (от английского preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.

Текст с отступом: <BLOCKQUOTE> ... </BLOCKQUOTE>

Текст, заключенный между метками <BLOCKQUOTE> и </BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем.

[ К следующей главе | К оглавлению | К предыдущей главе ]


Руководство по HTML, глава 5

Практическое руководство по HTML

© Николай Чувахин, 1997

Глава 5. За пределами HTML-файла

Связывание

Как уже упоминалось в самом начале, сокращение HTML означает "язык маркировки гипертекстов". Про маркировку мы уже поговорили достаточно. Не пора ли перейти к гипертексту? Прежде всего, что же такое гипертекст? В отличие от обыкновенного текста, который можно читать только от начала к концу, гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Системы помощи многих популярных программных продуктов устроены именно по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа. В HTML переход от одного фрагмента текста к другому задается с помощью метки вида:

<A HREF="[адрес перехода]">выделенный фрагмент текста</A>

В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например:

<A HREF="pr.htm">Перейти к оглавлению</A>

Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет загружен документ pr.htm. Обратите внимание: если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере. Из этого следует одно очень важное практическое соображение. Если Вы подготовили к публикации некоторую группу HTML-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге на Вашем компьютере, вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере, на локальной сети или... на Интернет! Таким образом, у Вас появляется возможность разрабатывать целые коллекции документов без подключения к Интернет, и только после окончательной готовности, подтвержденной испытаниями, помещать коллекции документов на Интернет целиком. На практике, однако, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере. Например, если Вы хотите дать ссылку на это руководство со своей странички, Вам придется ввести в свой HTML-документ примерно такой фрагмент:

<A HREF="http://www.yi.com/home/ChuvakhinNikolai/pr.htm">
Практическое руководство по HTML Николая Чувахина</A>

При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого необходимо создать в документе, к которому будет задан переход, некоторую опорную точку, или анкер. Разберем это на примере. Допустим, что необходимо осуществить переход из файла 1.htm к словам "Переход закончен" в файле 2.htm (файлы находятся в одном каталоге). Прежде всего, необходимо создать вот такой анкер в файле 2.htm:

<A NAME="AAA">Переход закончен</A>

Слова "Переход закончен" при этом никак не будут выделены в тексте документа. Затем в файле 1.htm (или в любом другом) можно определить переход на этот анкер:

<A HREF="2.htm#AAA">Переход к анкеру AAA</A>

Кстати говоря, переход к этому анкеру можно определить и внутри самого документа 2.htm — достаточно только включить в него вот такой фрагмент:

<A HREF="#AAA">Переход к анкеру AAA</A>

На практике это очень удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на анкеры, расположенные в заголовках разделов документа. Во избежание недоразумений рекомендуется задавать имена анкеров латинскими буквами. Следите за написанием имен анкеров: большинство браузеров отличают большие буквы от маленьких. Если имя анкера определено как AAA, ссылка на анкер aaa или AaA не выведет Вас на анкер AAA, хотя документ, скорее всего, будет загружен корректно. Пока что мы обсуждали только ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:

<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>

Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.

<A HREF="mailto:user@mail.box">Послать письмо</A>

Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box. Разберем все, что мы знаем о связывании, с помощью примера 7.

<HTML>
<HEAD>
<TITLE>Пример 7</TITLE>
</HEAD>
<BODY>
<H1>Связывание </H1>
<P>С помощью ссылок можно переходить к другим файлам
(например, к <A HREF="pr.htm">оглавлению этого
руководства</A>).</P>
<P>Можно выгружать файлы (например,
<A HREF="ftp://yi.com/home/ChuvakhinNikolai/html-pr.doc">это
руководство в формате Microsoft Word 2.0</A>) по FTP.</P>
<P>Можно дать пользователю возможность послать почту (например,
<A HREF="mailto:nc@iname.com">автору этого руководства</A>).</P>
</BODY>
</HTML>

Изображения в HTML-документе

Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте. Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:

<IMG SRC="picture.gif">

Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например:

<IMG SRC="picture.gif" ALT="Картинка">

Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени). Файл, содержаций изображение, может находиться в другом каталоге или даже на другом сервере. В этом случае стоит указать его полное имя (см. раздел "Связывание"). Разберем все, что мы знаем об изображениях, с помощью примера 8.

<HTML>
<HEAD>
<TITLE>Пример 8</TITLE>
</HEAD>
<BODY>
<H1>Изображения </H1>
<P>Изображение можно встроить очень просто: </P>
<P><IMG SRC="picture.gif"></P>
<P>Кроме того, изображение можно сделать "горячим", то есть
осуществлять переход при нажатии на изображение:</P>
<P><A HREF="pr.htm"><IMG SRC="picture.gif"></A></P>
</BODY>
</HTML>

Обратите внимание на вторую часть примера. Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке (в примере 8 переход происходит на оглавление Руководства).

[ К следующей главе | К оглавлению | К предыдущей главе ]


Руководство по HTML, глава 6

Практическое руководство по HTML

© Николай Чувахин, 1997

Глава 6. Тайное становится явным,
или Видимое действие невидимых меток

Цветовая гамма HTML-документа

Если Вы читаете это Руководство на Интернет, Вы уже могли заметить, что главы Руководства и примеры несколько отличаются по цветовой гамме. Главы Руководства написаны черным по белому, а гипертекстовые ссылки выделены красным цветом. Я не знаю, как Вы видите примеры, но у меня они написаны черным по серому с выделением ссылок синим цветом. Дело в том, что главы Руководства содержат HTML-метки, определяющие их цветовую гамму. Примеры таких меток не содержат, поэтому их цветовая гамма устанавливается браузером самостоятельно. Именно поэтому я не знаю, какие цвета Вы видите в примерах — это определяется настройкой Вашего браузера. Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри метки <BODY>. Вот список этих атрибутов:

bgcolor
Определяет цвет фона документа.
text
Определяет цвет текста документа.
link
Определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке.
vlink
Определяет цвет ссылки на документ, который уже был просмотрен ранее.
alink
Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.

Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатиричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Разберем несколько примеров.

bgcolor=#FFFFFF
Цвет фона. Насыщенность красным, зеленым и синим одинакова — FF (это шестнадцатиричное представление числа 255). Результат — белый цвет.
text=#000000
Цвет текста. Насыщенность красным, зеленым и синим одинакова — 00 (ноль). Результат — черный цвет.
link=#FF0000
Цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим — 00 (ноль). Результат — красный цвет.

Кроме того, метка <BODY> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg). Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками. Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета.

Заголовок HTML-документа: что в нем может быть интересного?

Заголовок HTML-документа, вообще говоря, не виден пользователю при просмотре. Однако в нем есть некоторые интересные особенности, которые стоит знать. Заголовок HTML-документа может включать неограниченное количество так называемых META-инструкций. META-инструкция — это просто способ определить некоторую переменную путем указания ее имени (атрибут NAME) и значения (атрибут CONTENT). Вот некоторые наиболее типичные META-инструкции:

<META NAME="description" CONTENT="Это руководство - учебник для
тех, кто хочет публиковать документацию любого рода на глобальной
компьютерной сети Интернет">

Такая META-инструкция определяет переменную description, содержащую краткое описание документа. Многие поисковые механизмы постоянно сканируют Интернет в поисках HTML-файлов, отыскивают в них эту переменную, сохраняют ее в своих базах данных и демонстрируют ее в ответ на запросы пользователей.

<META NAME="keywords" CONTENT="Интернет, HTML, WWW, руководство,
публикация, гипертекст">

Такая META-инструкция определяет переменную keywords, содержащую набор ключевых слов, описывающих содержание документа. На практике поиск по ключевым словам очень удобно использовать при строительстве поискового механизма, работающего в пределах одного сервера (со стороны очень похоже, что именно такой подход был использован, например, при создании сервера технической поддержки фирмы Novell, ведущего производителя операционных систем для локальных компьютерных сетей). Другая группа META-инструкций определяет эквиваленты команд протокола передачи гипертекстов. (Не переживайте, это не так страшно, как кажется на первый взгляд!) Разберем несколько примеров:

<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=windows-1251">

Эта META-инструкция дает браузеру указание интерпретировать загружаемый документ как содержащий HTML-текст в кодировке Windows/1251.

<META HTTP-EQUIV="Content-type"
CONTENT="text/html; charset=koi8-r">

Эта META-инструкция абсолютно аналогична предыдущей, только в качестве кодировки указана КОИ-8.

<META HTTP-EQUIV="Refresh" CONTENT="[время]; URL=[документ]">

Такая META-инструкция дает браузеру примерно такое указание: "Если через [время] секунд после завершения загрузки этого документа пользователь не перейдет к другому документу, начать загрузку ресурса [документ]". Более конкретно это может выглядеть, к примеру, вот так:

<META HTTP-EQUIV="Refresh"
CONTENT="10; URL=http://www.yi.com/home/ChuvakhinNikolai/">

Если пользователь не предпримет никаких видимых действий в течение 10 секунд после загрузки документа, содержащего такую инструкцию, автоматически будет загружен документ http://www.yi.com/home/ChuvakhinNikolai/. META-инструкцию Refresh можно использовать, например, если Вы перенесли некоторый документ с одного сервера на другой. Вместо копии документа на старом сервере можно оставить короткое сообщение о переносе, включающее META-инструкцию Refresh и адрес документа на новом сервере. Если в качестве параметра [документ] подставить имя файла, содержащего звук, через [время] секунд после загрузки HTML-файла начнется загрузка и проигрывание этого звука (при условии, конечно, что браузер пользователя поддерживает формат этого звукового файла). Очень удобно для всякого рода приветственных речей.

Пример

В отличие от всех примеров, которые мы рассматривали ранее, пример 9 состоит не из одного, а из трех файлов. Используя META-инструкцию Refresh, мы создадим небольшой слайд-фильм из трех кадров (файлов e0009.htm, e0009a.htm и e0009b.htm), которые будут циклически повторяться. Для остановки демонстрации нужно будет воспользоваться любой из гипертекстовых ссылок.

<HTML><!--файл e0009.htm -->
<HEAD>
<TITLE>Пример 9</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="2; URL=e0009a.htm">
</HEAD>
<BODY bgcolor=#FFFFFF text=#000000 link=#FF0000>
<H1>Слайд-демонстрация цветовых гамм <BR>
с помощью META-инструкции Refresh </H1>
<P>Черный текст на белом фоне </P>
<P>[<A HREF="pr.htm">Возврат к оглавлению</A>|
<A HREF="pr0006.htm">Возврат к главе 6</A>]</P>
</BODY>
</HTML><!--конец файла e0009.htm -->
<HTML><!--файл e0009a.htm -->
<HEAD>
<TITLE>Пример 9a</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="2; URL=e0009b.htm">
</HEAD>
<BODY bgcolor=#000000 text=#FFFFFF link=#FF0000>
<H1>Слайд-демонстрация цветовых гамм <BR>
с помощью META-инструкции Refresh </H1>
<P>Белый текст на черном фоне </P>
<P>[<A HREF="pr.htm">Возврат к оглавлению</A>|
<A HREF="pr0006.htm">Возврат к главе 6</A>]</P>
</BODY>
</HTML><!--конец файла e0009a.htm -->
<HTML><!--файл e0009b.htm -->
<HEAD>
<TITLE>Пример 9b</TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="2; URL=e0009.htm">
</HEAD>
<BODY bgcolor=#C0C0C0 text=#0000FF link=#FF0000>
<H1>Слайд-демонстрация цветовых гамм <BR>
с помощью META-инструкции Refresh </H1>
<P>Синий текст на сером фоне </P>
<P>[<A HREF="pr.htm">Возврат к оглавлению</A>|
<A HREF="pr0006.htm">Возврат к главе 6</A>]</P>
</BODY>
</HTML><!--конец файла e0009b.htm -->

[ К следующей главе | К оглавлению | К предыдущей главе ]


Руководство по HTML, глава 7

Практическое руководство по HTML

© Николай Чувахин, 1997

Глава 7. Таблицы

Для чего нужны таблицы?

На этот вопрос есть очевидный ответ: таблицы нужны для представления информации в табличном виде. Есть, однако, и менее очевидные ответы. До настоящего времени мы имели дело с документами, в которых существовал только один "поток" текста. На практике иногда очень хочется расположить текст в несколько колонок. Таблица может в этом помочь. Кроме того, таблица, состоящая из одной ячейки, может очень эффектно выделить фрагмент текста, на который Вы хотите обратить внимание читателя.

Как устроена таблица

В устройстве таблицы легче всего разобраться на простом примере.

<HTML>
<HEAD>
<TITLE>Пример 10</TITLE>
</HEAD>
<H1>Простейшая таблица </H1>
<TABLE BORDER=1> <!--Это начало таблицы-->
<CAPTION>        <!--Это заголовок таблицы-->
У таблицы может быть заголовок
</CAPTION>
<TR>             <!--Это начало первой строки-->
<TD>             <!--Это начало первой ячейки-->
Первая строка, первая колонка
</TD>            <!--Это конец первой ячейки-->
<TD>             <!--Это начало второй ячейки-->
Первая строка, вторая колонка
</TD>            <!--Это конец второй ячейки-->
</TR>            <!--Это конец первой строки-->
<TR>             <!--Это начало второй строки-->
<TD>             <!--Это начало первой ячейки-->
Вторая строка, первая колонка
</TD>            <!--Это конец первой ячейки-->
<TD>             <!--Это начало второй ячейки-->
Вторая строка, вторая колонка
</TD>            <!--Это конец второй ячейки-->
</TR>            <!--Это конец второй строки-->
</TABLE>         <!--Это конец таблицы-->
</BODY>
</HTML>

Таблица начинается с метки <TABLE> и заканчивается меткой </TABLE>. Метка <TABLE> может включать несколько атрибутов:

ALIGN
Устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
WIDTH
Ширина таблицы. Ее можно задать в пикселах (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%).
BORDER
Устанавливает ширину внешней рамки таблицы и ячеек в пикселах (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.
CELLSPACING
Устанавливает расстояние между рамками ячеек таблицы в пикселах (например, CELLSPACING=2).
CELLPADDING
Устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, CELLPADDING=10).

Таблица может иметь заголовок (<CAPTION> ... </CAPTION>), хотя заголовок не является обязательным. Метка <CAPTION> может включать атрибут ALIGN. Допустимые значения: <CAPTION ALIGN=TOP> (заголовок помещается над таблицей) и <CAPTION ALIGN=BOTTOM> (заголовок помещается под таблицей). Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать следующие атрибуты:

ALIGN
Устанавливает выравнивание текста в ячейках строки. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN
Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).

Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать следующие атрибуты:

NOWRAP
Присутствие этого атрибута означает, что содержимое ячейки должно быть показано в одну строку.
COLSPAN
Устанавливает "размах" ячейки по горизонтали. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.
ROWSPAN
Устанавливает "размах" ячейки по вертикали. Например, ROWSPAN=2 означает, что ячейка занимает две строки.
ALIGN
Устанавливает выравнивание текста в ячейке. Допустимые значения: ALIGN=LEFT (выравнивание влево), ALIGN=CENTER (выравнивание по центру), ALIGN=RIGHT (выравнивание вправо).
VALIGN
Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).
WIDTH
Устанавливает ширину ячейки в пикселах (например, WIDTH=200).
HEIGHT
Устанавливает высоту ячейки в пикселах (например, HEIGHT=40).

Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект &nbsp; (non-breaking space — неразрывающий пробел). Ячейка по-прежнему будет пустой, а рамка вокруг нее будет. Любопытно отметить, что любая ячейка таблицы может содержать в себе другую таблицу.

[ К следующей главе | К оглавлению | К предыдущей главе ]


Руководство по HTML, глава 8

Практическое руководство по HTML

© Николай Чувахин, 1997

Глава 8. Формы

Для чего нужны формы?

Форма — это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана. Рассказать о формах в книге, посвященной HTML, достаточно трудно. Причина очень простая: создать форму гораздо проще, чем ту "точку внешнего мира", в которую форма будет посылать информацию. В качестве такой "точки" в большинстве случаев выступает программа, написанная на Перл или Си. Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix. В последнее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php). Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

Как устроена форма

Форма открывается меткой <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений. Метка <FORM> может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:

ACTION
Обязательный атрибут. Определяет, где находится обработчик формы.
METHOD
Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.
ENCTYPE
Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded.

Простейшая форма

Для того, чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то орган управления. Создать такой орган управления очень просто:

<INPUT TYPE=submit>

Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit (читается "сабмит" с ударением на втором слоге, от английского "подавать"), при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>. Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="[Надпись]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:

<INPUT TYPE=submit VALUE="Поехали!">

Теперь мы знаем достаточно для того, чтобы написать простейшую форму . Она не будет собирать никаких данных, а просто вернет нас к тексту этой главы.

<HTML>
<HEAD>
<TITLE>Пример 11</TITLE>
</HEAD>
<H1>Простейшая форма </H1>
<FORM ACTION="pr0008.htm"> <!--Это начало формы-->
<INPUT TYPE=submit VALUE="Назад, к главе 8...">
</FORM> <!--Это конец формы-->
</BODY>
</HTML>

Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя] (читается "нэйм", от английского "имя"), например:

<INPUT TYPE=submit NAME=button VALUE="Поехали!">

При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали!. В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.

Как форма собирает данные

Существуют и другие типы элементов <INPUT>. Каждый элемент <INPUT> должен включать атрибут NAME=[имя], определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов <INPUT> должны включать атрибут VALUE="[значение]", определяющий значение, которое будет передано обработчику под этим именем. Для элементов <INPUT TYPE=text> и <INPUT TYPE=password>, однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры. Основные типы элементов <INPUT>:

TYPE=text
Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах). Пример:
<INPUT TYPE=text SIZE=20 NAME=user VALUE="Иван">
Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст Иван, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user.
TYPE=password
Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*). Пример:
<INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10>
Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов. Введенный пароль передается обработчику в переменной pw.
TYPE=radio
Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример:
<INPUT TYPE=radio NAME=modem VALUE="9600" checked> 9600 бит/с

<INPUT TYPE=radio NAME=modem VALUE="14400"> 14400 бит/с <INPUT TYPE=radio NAME=modem VALUE="28800"> 28800 бит/с

Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.
TYPE=checkbox
Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов. Пример:
<INPUT TYPE=checkbox NAME=comp VALUE="PC"> Персональные компьютеры

<INPUT TYPE=checkbox NAME=comp
  VALUE="WS" checked> Рабочие станции <INPUT
  TYPE=checkbox NAME=comp VALUE="LAN"> Серверы локальных
  сетей <INPUT TYPE=checkbox NAME=comp VALUE="IS" checked>
  Серверы Интернет

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS.
TYPE=hidden
Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие возможные варианты использования Вы вполне можете придумать сами. Пример:
<INPUT TYPE=hidden NAME=version VALUE="1.1">
Определяет скрытую переменную version, которая передается обработчику со значением 1.1.
TYPE=reset
Определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name. Пример:
<INPUT TYPE=reset VALUE="Очистить поля формы">
Определяет кнопку Очистить поля формы, при нажатии на которую форма возвращается в исходное состояние.

Помимо элементов <INPUT>, формы могут содержать меню <SELECT> и поля для ввода текста <TEXTAREA>. Меню <SELECT> из n элементов выглядит примерно так:

<SELECT NAME="[имя]">
<OPTION VALUE="[значение 1]">[текст 1]
<OPTION VALUE="[значение 2]">[текст 2]
...
<OPTION VALUE="[значение n]">[текст n]
</SELECT>

Как Вы видите, меню начинается с метки <SELECT> и заканчивается меткой </SELECT>. Метка <SELECT> содержит обязательный атрибут NAME, определяющий имя переменной, которую генерирует меню. Метка <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]). Меню <SELECT> в большинстве случаев показывается в виде выпадающего меню. Метка <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка <OPTION> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию. Разберем небольшой пример.

<SELECT NAME="selection">
<OPTION VALUE="option1" checked>Вариант 1
<OPTION VALUE="option2">Вариант 2
<OPTION VALUE="option3">Вариант 3
</SELECT>

Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2 и Вариант 3. По умолчанию выбран элемент Вариант 1. Обработчику будет передана переменная selection значение которой может быть option1 (по умолчанию), option2 или option3. После всего, что мы уже узнали, элемент <TEXTAREA> может показаться совсем простым. Например:

<TEXTAREA NAME=address ROWS=5 COLS=50>
А здесь - Ваш адрес...
</TEXTAREA>

Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере — address). Атрибут ROWS устанавливает высоту окна в строках (в примере — 5). Атрибут COLS устанавливает ширину окна в символах (в примере — 50). Текст, размещенный между метками <TEXTAREA> и </TEXTAREA>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть. Важно знать, что русские буквы в окне <TEXTAREA> при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.

Пример

Для демонстрации использования форм я написал небольшую программу на PHP, которая находится по адресу:

http://206.31.82.215/hp/nc/fd-win.pht

Исходные данные в эту программу передаст форма, описанная в примере 12:

<HTML>
<HEAD>
<TITLE>Пример 12</TITLE>
</HEAD>
<H1>Несколько более сложная форма </H1>
<FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post>
<H2>Расскажите немного о себе...</H2>
<P>Указывать подлинные данные совсем не обязательно.
Для целей демонстрации вполне подойдут и вымышленные. </P>
<P>Имя: <INPUT TYPE=text SIZE=40 NAME=fn><BR>
Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR>
Пол: <INPUT TYPE=radio NAME=gender VALUE="male" checked>мужской
<INPUT TYPE=radio NAME=gender VALUE="female">женский<BR>
Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR>
<INPUT TYPE=submit VALUE="Запустить обработчик"></P>
</FORM>
</BODY>
</HTML>

Заполняйте форму, жмите на кнопку и смотрите, что будет...

Маленькая хитрость,
или Как отправить форму почтой

Все это прекрасно, скажут скептики, но на кой ляд нужны формы людям, которым их нечем обработать? Отчасти это верно, но только отчасти. HTML предоставляет в Ваше распоряжение довольно мощный механизм пересылки содержимого форм по электронной почте. Вот как это выглядит на практике. Допустим, что мы слегка изменили Пример 12. Вместо строки

<FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post>

мы ввели строку

<FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain>

Обратите внимание, что мы изменили алгоритм кодирования на text/plain, то есть фактически выключили кодирование вообще. Предположим теперь, что пользователь указал, имя Иван, фамилию Петров, мужской пол и возраст 22 года. Теперь вопрос: что произойдет, если пользователь нажмет на кнопку Запустить обработчик? Ответ прост. На адрес user@mail.box электронной почтой автоматически будет отправлено сообщение следующего содержания:

fn=Иван
ln=Петров
gender=male
age=22

К сожалению, не все пользователи смогут воспользоваться такой формой. Дело в том, что всю работу по составлению сообщения и запуску почтовой программы для его отправки фактически берет на себя браузер пользователя. Это значит, что конфигурация доступа пользователя к Интернет должна обеспечивать одновременное функционирование протокола передачи гипертекстов и протокола доставки исходящей почты. Такое возможно не всегда. Тем не менее, даже если это невозможно, ничего смертельного не случится. Браузер просто выдаст сообщение об ошибке.

[ К оглавлению | К предыдущей главе ]


Основы сетевой рекламы

Сначала оговорюсь, что реклама в Сети - это целая наука, область, в которой работают тысячи профессионалов. Данная статья - это разговор о самых азах, каждому же способу промоутинга можно посвятить отдельный сайт.

Итак, вы создали, на ваш взгляд, замечательную Web-страницу, но счетчик у нее практически не крутится. Обидно, но унывать не стоит. "Раскрутить" сайт в Сети не так уж сложно. Вот несколько практических советов, которые помогут вам бесплатно увеличить посещаемость вашей страницы. В общем, ваша цель состоит в том, чтобы известить как можно большую часть сетевого населения о вашем WWW-творении.

Для начала, один совет на тему "Как НЕ стоит делать". Ни в коем случае не рассылайте пользователям Интернета письма с приглашением посетить вашу страницу. Это называется несанкционированной рассылкой рекламы или одним емким словом "спам" и является самым ненавистным для пользователей видом деятельности в Интернет. Во многих странах (например, в США) уже приняты законы, устанавливающие уголовную ответственость за рассылку рекламы. Россия, как всегда, отстает, но особо не обольщайтесь: недовольные пользователи могут закидать вас mailbombs (то есть пришлют вам штук 500 писем по мегабайту каждое) или устроят вам иную пакость. Пожалуй, единственный случай, когда вы можете прибегнуть к рассылке писем - это когда на вашей странице предлагаются реальные бесплатные услуги, полезные широкому кругу пользователей (но тоже особенно не злоупотребляйте).

Но хватит о грустном, время становиться звездой в мире Интернет! Хочу отметить, что все предложенные рекомендации были выработаны мною при раскрутке собственных WWW-проектов, так что можете им довериться :-).

Во-первых, поставьте себе счетчик "Rambler's Top 100" (http://counter.rambler.ru/top100/), бело-синий значок которого вы наверняка видели на многих сайтах. Только не надо копировать HTML-код счетчика с чужих страниц - это запрещено! Для получения HTML-кода вашего собственного счетчика нужно заполнить online-форму на сайте http://counter.rambler.ru/top100/. После того как вы разместите счетчик на своей странице, она будет занесена в таблицы рейтинга "Rambler's Top 100". Даже если вы будете находиться в самом конце рейтинга, вашу страницу все равно заметят, правда только в том случае, если ваш сайт посвящен какой-нибудь интересной теме, а не одному вам, любимому. А вот при установке счетчика на сайт SoftList.ru количество посетителей в первый же день составило 174, а во второй - уже 280 человек!
Кроме того, вы получите разнообразную статистику посещения вашей страницы, включая адреса посетителей, т.е. сможете узнать, насколько ваша рекламная кампания эффективна.

Во-вторых, дайте знать о своей странице многочисленным поисковым системам и online-каталогам, таким как AltaVista, Yahoo, Excite, Rambler, Яndex и др. Если вы сомневаетесь в том, что ваша страница затеряется среди множества ссылок, выводимых поисковой ситемой в ответ на запрос пользователя, то напрасно. Мне довольно часто приходят письма, в которых авторы упоминают, что наткнулись на мой сайт в той или иной поисковой системе. Для занесения данных о своей WWW-странице в базу данных поисковой системы или каталога лучше всего воспользоваться ситемой TAU, доступной по адресу: http://www.design.ru/free/tau/. Достаточно заполнить форму, нажать кнопку - и данные о вашей странице будут отправлены двум десяткам популярных иностранных и российских поисковых систем. Некоторые из них, возможно, по какой-либо причине не смогут принять ваш запрос, однако самые крутые и популярные сообщат вам, что "все OK".

Далее, вы можете попросить вебмастера какого-либо популярного сайта поместить ссылку на вышу страницу. Обычно, если сайт посвящен какой-либо конкретной теме (например, разведению пятнистых крокодилов в неволе или Мурату Насырову), то он также содержит раздел "ссылки", где размещены адреса страниц на аналогичную тему. Тут уж все зависит от вас: ищите такие сайты, а найдя, терроризируйте вебмастера просьбами поставить ссылку на вас (помните: "Бороться и искать, найти и не сдаваться!"). Могу подсказать: на сайте ANEKDOT.RU существует раздел "Частные коллекции анекдотов", так что если у вас на странице есть хоть какой-нибудь юмор, напишите письмо вебмастеру ANEKDOT.RU с просьбой поставить ссылку на вашу страницу. "Ну и что это мне даст?" - спросите вы. А то, что посещаемость ANEKDOT.RU давно превысила 20 000 человек в день, и десяток-другой (как минимум) посетителей вас точно заметят.

И наконец, остается еще и такой традиционный способ увеличения посещаемости, как баннерная реклама. Если кто не знает, то напомню: баннер - это не фамилия, а прямоугольная картинка, рекламирующая тот или иной сайт (такие висят почти на каждом более-менее крупном сайте). Баннерную рекламу в российском интернете обеспечивают различные службы, как платные, так и бесплатные. Из последних могу назвать такие, как LinkExchange.Ru, BannerPoint.Ru, Banners.Ru. Принцип работы этих служб состоит в следующем: после регистрации вы размещаете на своих страницах определенный HTML-код, в результате чего ваш баннер начинает показываться на страницах других участников системы, а их баннеры, в свою очередь - на вашей. Чем чаще показываются чужие баннеры на ваших страницах, тем чаще показывают ваш баннер.
Естественно, для участия в системе обмена баннерами вам нужно нарисовать баннер своей страницы. Вопросам баннерной рекламы посвящен целый сайт - BannerMaker.Ru. В целом, этот способ раскрутки собственной страницы довольно эффективен - но все зависит от баннера. Он, разумеется, должен привлекать внимание пользователя и при этом быть небольшого размера (имеется в виду размер графического файла), чтобы успевать загрузиться до того, как посетитель страницы потеряет к ней интерес.

Ну вот вроде и все... Хочется заметить, что если на вашей странице мало информации, интересной другим пользователям, то, к сожалению, никакая, даже самая интенсивная, реклама не поможет. Но если ваш сайт действительно интересен и хорошо оформлен, об обеспечении посещаемости вам почти не придется беспокоиться: вебмастера сами будут ставить на вас ссылки, а простые юзеры - рекомендовать вашу страницу всем друзьям и знакомым. В любом случае, успеха вам!

Reklama.Ru. The Banner Network.

Статья Станислава Жаркова
Pro.Net.ru


Меняем строку состояния мышкой

Если Вы хотите чтобы при указании на ссылку в строке состояния писался заданный Вами текст, то придеться немного доработать HREF тег (надписи отмеченные красным необходимо откорректировать):

<A HREF="страница.htm" onMouseOver="window.status='Ваш текст тут';return true">

Наведите мышкой на эту ссылку чтобы увидеть результат.

P.S. На тех страницах где используется данный скрипт желательно установить Свой текст в сроке состояния, потому что если этого не сделать после увода мышки с сылки текст строки состояния не поменяется обратно.


Самодельная кнопка "назад"

Полезно создавать кнопку "назад" (back) на своей странице. Ниже находится небольшой скрипт позволяющий воплотить эту идею. Она реализована обычным HREF тегом, который используется для создания ссылок (надписи отмеченные красным необходимо откорректировать):

<A HREF="javascript:history.back()" onMouseOver="window.status='Назад';return true">Назад(или другой Ваш текст)</A>

Результат: Назад

P.S. На тех страницах где используется данный скрипт желательно установить Свой текст в сроке состояния, потому что если этого не сделать после увода мышки с сылки текст строки состояния не поменяется обратно.


Свой текст в строке состояния

Для того чтобы поместить свой текст в строку состояния браузера необходимо доработать BODY тег. Вот так (надписи отмеченные красным необходимо откорректировать):

<body .... onLoad="window.defaultStatus='Ваш текст тут'">


Дата обновления документа

Этот скрипт предназначен для экономии вашего времени. Используя его вам не придется менять дату обновления документа при каждом его изменении. Он особенно полезен, если Вы обновляете страницы очень часто или используете стандартный кусок HTML текста вызываемый посредством SSI на разных страницах.

<SCRIPT LANGUAGE="JavaScript"><!--
document.writeln(document.lastModified)
// --></SCRIPT>

результат:

Для браузера этот скрипт просто выдаст несколько символов, поэтому если Вы хотите изменить стиль написания даты используйте обычные HTML теги:

<FONT SIZE="-2">Документ обновлен:
<SCRIPT LANGUAGE="JavaScript"><!--
document.writeln(document.lastModified)
// --></SCRIPT></FONT>

результат: Документ обновлен:


Использование буквы я в java-script`е

Если Вы используете Netscape Navigator или Communicator Вы наверняка попадали на такие странички, где браузер начинал бесится (Navigator выдает сообщение об ошибке в java-script`е, а в Communicator`е открывается куча окошек и его приходится прерывать). И все это получается из-за того, что на страничке используется буква "я" в java-script`е. Самое удивительное это то, что IE работает с буквой "я" корректно. Перейдем сразу к делу: чтобы с буквой "я" нормально работал IE и Netscape необходимо перед буквой "я" ставить косую черту "\" - вот такой простой, но очень актуальный совет :).


Прибамбас к фреймам

Этот скрипт предназначен для страниц с фрэймами. Представьте себе такую картину: странник сети долго искал в поисковых машинах нужную ему информацию и попал на одну из ваших страниц которая должна быть во фрейме. Он посмотрит эту страницу и нажмет кнопку BACK и навсегда забудет о вашем сайте. Так вот, этот скрипт предназначен для того, чтобы пользователь не ушел бесследно ,а зашел на главную страницу сайта и увидел что на нем еще есть.

Синтаксис (надписи отмеченные красным необходимо откорректировать):

Этот скрипт при открытии страницы на которой он размещен на весь экран выдаст текст (при загрузки этой страницы во фрэйме этот текст конечно же будет отсутствовать):
Лучше смотреть с управляющим фреймом

<SCRIPT LANGUAGE="JavaScript">
<!--
if (self.parent.frames.length == 0)
document.writeln("Лучше смотреть с <A HREF=\"index.htm\">управлющим фреймом</A>");
// -->
</SCRIPT>

А этот скрипт прямо пересылает на заглавную страницу без всяких вопросов

<SCRIPT LANGUAGE="JavaScript">
<!--
if (self.parent.frames.length == 0)
self.parent.location="index.htm";
// -->
</SCRIPT>


Определение типа браузера

Используйте html код приведенный ниже для пересылки со странички на другие странички в зависимости от типа браузера используемого пользователем (надписи отмеченные красным необходимо откорректировать):

<script language="JavaScript">
<!--
if (navigator.appName == "Netscape") window.location.href = "Netscape.htm";
else if (navigator.appName == "Microsoft Internet Explorer") window.location.href = "explorer.htm";
else window.location.href = "neizvestniy_brauser.htm";
// -->
</script>


Автоматическая пересылка на страничку

Используйте html файл приведенный ниже для пересылки со странички на другую страничку без вопросов у пользователя (надписи отмеченные красным необходимо откорректировать):

<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="1; URL=http://www.куда.пересылать">
<script language="JavaScript"> <!--

window.location.href = "http://www.куда.пересылать"

// --> </script>
<CENTER><P><B><FONT SIZE=+4><A HREF="http://www.куда.пересылать">название сайта куда отсылаем</A></FONT></B></P></CENTER>
</BODY>
</HTML>


Уничтожитель фреймов

Этот скрипт полезно использовать на главной страничке своего сервера. Нередко бывает, что другие неопытные создатели страничек делают ссылку на Ваш сайт из фрейма и забывают указать target="_top" и вследствие этого Ваша страничка грузится во фрейме. Так вот этот скрипт позволяет добиться такого эффекта, что при загрузке Вашей странички разбиение окна браузера на фреймы исчезает.

Синтаксис (надписи отмеченные красным необходимо откорректировать):

<SCRIPT LANGUAGE="JavaScript">
<!--
setTimeout ("changePage()", 100);

function changePage() {
if (self.parent.frames.length != 0)
self.parent.location="http://www.ваш.url";
}

// -->
</SCRIPT>


Выпадающее меню

Хотите сделать такое меню:

Оно делается очень просто, синтаксис (надписи отмеченные красным необходимо откорректировать):

<form>
<select name="menu">
<option selected value="../soveti.htm">Советы
<option value="../kartinki.htm">Картинки
<option value="../web_design.htm">Веб дизайн
<option value="../moi_raboti.htm">Мои работы
</select>
<input type=button value="Ok"
onclick="top.location.href =
this.form.menu.options[this.form.menu.selectedIndex].value">
</form>

Слово selected определяет положение меню по умолчанию.
Если вы хотите использовать несколько выпадающих меню на странице - у каждого меню должно быть индивидуальное имя, у этого оно menu. Например если будет два меню тогда во втором меню пропишите menu1 вместо menu.


Нажимающаяся кнопка

Наверно Вы не раз видели как картинка сменяется другой картинкой при наведении на нее мышкой. Этот эффект реализуется при помощи Java-скрипта. Скрипт состоит из двух частей. Первая часть вставляется в html всего один раз. А вторую придется вставить столько раз сколько у Вас на страничке будет сменяющихся картинок. Как всегда надписи отмеченные красным необходимо подправить:

Первая часть:

<SCRIPT LANGUAGE="JavaScript">
<!--//

browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);

if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; }
else { roll = 'false'; }

function over(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }
function out(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }

if (roll == 'true')
{
a1=new Image;a1.src="image1.gif";
a2=new Image;a2.src="image2.gif";
...
aX=new Image;aX.src="imageX.gif";

}
//-->
</SCRIPT>

В конце первой части скрипта производится подгрузка изображений нажимающихся кнопок. Необходимо подгрузить картинки нажатой и не нажатой кнопок.
...
aX=new Image;aX.src="imageX.gif";
Эти две строчки показывают то, что необходимо прописать подгрузку всех картинок. В работающем скрипте не должно быть троеточия и вместо X должно быть число

Вторая часть:

<A HREF="page.htm" onMouseOver="over('image_name','image2.gif');" onMouseOut="out('image_name','image1.gif');"><img name="image_name" alt="текст" src="image1.gif" width=x height=y border="0"></A>

Что есть что:
page.htm - имя файла ссылки
image_name - Имя картинки, необходимо чтобы java-скрипт знал какую картинку менять. У каждой картинки должно быть свое имя.
image1.gif - Файл не нажатой кнопки.
image2.gif - Файл нажатой кнопки (будет на месте картинки image1.gif при наведении на нее мышкой)


Несколько полезных советов

Совет 1: Выдерживайте принятый стиль

  • Если Вы решили создать сложный HTML-документ с разветвленной структурой, постарайтесь оформить все его страницы одинаково, оперируя в рамках одного стиля. применяйте повторяющиеся управляющие элементы, одинаковые интервалы и подобные шрифты.
  • Изложенное относится и к регулярному обновлению Web-страниц. Чтобы добится стилевого единства, можно создать ряд шаблонов, которые подлежат заполнению в текстовом редакторе. Временные затраты на разработку шаблонов быстро окупятся при больших объемов документов и частом обновлении содержимого.

Совет 2: Правильно выбирайте фон сайта

  • Однотонный цветной фон предельно прост с точки зрения реализации и изменения, он все же является ключевым элементом дизайна, и Вы должны осуществлять его выбор со всей тщательностью. При выборе цвета фона Вы должны учитывать как он будет гармонировать со следующими элементами: цветом текста, цветом гиперссылок, с логотипами или фирменными эмблемами.
  • Крайне необходимо обеспечить достаточный цветовой и яркостный контраст между навигационными элементами и фоном.
  • Если же Вы решили использовать узорчатый фон, то изображения, используемые для построения фона, дожны быть едва заметными, в каком-то смысле неопределенными. Они должны содержать нейтральные, неконтрастирующие друг с другом цвета. И наконец, в идеале эти изображения должны образовывать бесшовный фон при их отображении методом укладки плиток.
  • И напоследок, фон не должен становится доминирующим элементом оформления. Он должен дополнять основную идею дизайна, но никак не заменять ее.

Совет 3: Используйте принцип KISS при создании сайтов

Принцип KISS - Keep It Simple, Stupid (Будь проще, дурачок).

  • При создании сайтов используйте как можно более простой язык, особенно если речь идет о персональных страницах.
  • Не используйте технические или научные термины, которые непонятны большинству.
  • Используйте общие слова, а не "литературные".
  • Избегайте использования таинственных акронимов, тем более не используйте их в заголовках. При употреблении акронима давайте полную расшифровку и его объяснение при первом упоминание в тексте.

Совет 4: Проверяйте на ошибки и недочеты по сто раз все, что закачиваете на свой сайт.

Совет 5: Не торопитесь с регистрацией в поисковых системах и каталогах, сначала подготовьте сайт.

Прежде всего рекомендуем не торопится с регистрацией в поисковых системах. Сначала подготовьте сайт для успешной регистрации, ведь нам надо попасть при запросе на как можно более высокое место.
Для этого следуйте простым правилам при создании своих страничек.

Ваш сайт должен выглядеть примерно так:

<HTML>
<HEAD>
<TITLE>Заглавие Вашей странички </TITLE>
<META NAME="description" CONTENT="Описание информации на страничке, что содержит">
<META NAME="keywords" CONTENT="Ключевые слова для поисковых систем">
</HEAD>
<BODY>

Это поможет для правильной регистрации. Но не надо ставить много "keywords" многие поисковые системы их просто игнорируют, а времени на загрузку сайта тратится больше. Внимание уделяйте заголовку "<TITLE> </TITLE> ". В заголовке уже должен описываться Ваш сайт наиболее полным образом.

2. Далее многие поисковики обращают внимание на первые слова и фразы на Вашем сайте. Поэтому наиболее полно опишите Ваш сайт с первых слов.

3. Базовые понятия и ключевые слова для сайта следует включать в HTML тэги (в порядке значимости):

  • <TITLE>
  • <H1-..H6>
  • <ADDRESS>
  • <B>, <STRONG>

4. Чем чаще слово встречается в комбинации этих полей, тем более вероятно, что поисковая система найдет ваш документ ближе к началу списка результатов поиска. Кроме того в некоторых поисковых системах, чем ближе располагается поисковое слово к началу документа, тем больше весовой коэффициент данного слова.

5. Не следует также использовать невидимый текст на страничке (т.е. шрифты, цвет которых соответствует цвету background). Комментарии в документе роботы многих хороших поисковых систем тоже не сканируют, по-этому советуем использовать их по прямому назначению.

6. Не следует включать в список желаемых ключевых слов общеупотребительные, часто встречающиеся слова, такие как сервер, html, ru, сайт и другие. Ваши слова должны быть достаточно информативными. Многие поисковые системы не сканируют общеупотребительные слова.

7. С точки зрения поиска использование фреймов в документе не приветствуется. Это не означает, что роботы не умеют сканировать фреймы. Однако, мы советуем включать в текст таких документов HTML тэг <NOFRAMES> с последующим описанием документа и ссылками. Разумеется, это увеличит размер странички, но это улучшит Ваши шансы на правильную регистрацию поисковыми машинами.

8. При указании перекрестных ссылок в документе будте предельно внимательны, проверьте работоспособность каждой ссылки, иначе поисковые системы не смогут проиндексировать весь Ваш сайт.

9. Максимальный размер документа должен составлять 100 - 150KB. Документы большего размера неудобоваримы для поисковых систем и людей.

Совет 6: Делайте странички интерактивными.

Совет 7: Сделайте так, чтобы Ваши посетители возвращались на Ваш сайт.

1. Хорошее содержание.

Информативность - вот главное. Ваш сайт должен содержать нужную информацию и регулярно обновляться.

2. Легкость в использование.

Мы часто слышим о "дружественом пользователю" компьютеру или программе. Создавайте "дружелюбные" сайты. Снабжайте сайт навигацией, легкой и прятной в использовании.

3. Быстрая загрузка.

Ваш сайт должен уметь работать с самым старым броузером и самым медленным модемом.

4. Регулярное обновление.

У Вас хорошее содержание, но проблема обновление раз в год. Обновляйте чаще и предупреждайте об обновлениях.

5.Конкурсы, соревнования и награды.

Конкурсы - великолепная идея. Награжденный пользователь будет возвращаться снова и снова.

6. Чат и доска объявлений.

Чат прибавит Вашему сайту интерактивности и посетителей.


Форматирование текста

Теперь поговорим о том, как форматировать текст. Существуют две школы - ограничивать текст в таблице или не ограничивать никак. У каждого способа есть свои преимущества.

Поскольку у всех пользователей мониторы разного размера и разрешающей способности, вы не можете угадать, у кого какой ширины будет текст. Помните про то, что меньше 500 пикселей в ширину окно браузера никто не делает. (Можно позволить себе игнорировать тех, у кого монитор 9 дюймов - их пять человек во всем мире.) Эта величина диктуется и шириной линейки с пиктограммами в браузерах. Максимальная же ширина, в принципе, ничем не ограничена.

Самый большой монитор из известных мне - Barco Mega Calibrator с максимальным разрешением 2000х1600 пикселей. Размер экрана - 29 дюймов. Стоит он около 20 тыщ долларов.

Надо отдавать себе отчет, что большинство мониторов в мире - 15-дюймовые. Самые распространенные разрешения - 640х480 и 800х600.

Зная все это, вы должны понимать, какую задачу преследуете. Если сайт, для которого делается дизайн, представляет собой огромный текстовый массив, информационную систему, систему поиска - ограничивать текст не нужно. Если же вы оформляете штучную вещь, колонка текста в таблице только придаст сайту ощущение большего внимания к тексту. Можно сравнить газету "Московские Новости" (текст сделан в колонке) с системой поиска "Яndex" (там текст ничем не ограничен).

Спорить о ширине этой самой колонки можно долго. Я предпочитаю ширину от 500 до 600 пикселей. Многие уверены, что ширина должна быть не в пикселях, а в процентах, для того чтобы текст всегда занимал пропорционально равное место на экране. Мне этот способ не близок, так как я не люблю, когда текст шире графики, стоящей наверху и внизу. Колонку же вообще лучше использовать потому, что строку текста длиной, скажем, в 30 сантиметров читать довольно трудно.

Хотя мне приходилось иногда делать колонку текста в таблице с процентным значением - см. например Glass Studio. Но там и картинки я сделал растягивающимися по разные края окна, чтобы текст не был шире графики. Этот способ хорош, но не универсален. Если вам придет в голову сделать колонку шириной в 700 пикселей, остановите себя. В этом случае человек, который захочет уменьшить размер окна, потеряет половину текста. Если вы хотите, чтобы в большом окне текст шел от края до края, пользуйтесь процентными значениями.

Если вы оформляете большой объем текста - скажем, библиотеку, поисковую систему, информационно-справочную систему, - не ограничивайте текст.

Если вы оформляете журнал, сделайте колонку не очень широкой - около 400 пикселей, чтобы по краям осталось место для комментариев, рубрик, рекламы и пр.

Для небольших текстов подойдет ширина 500-600 пикселей.

В некоторых случаях ширину надо указывать в процентах (<table width=90%>, например).

Copyright © 1997-1999 Артемий Лебедев
E-mail: tema@tema.ru


- Энциклопедия создания сайтов для начинающих.

Что делать?

Классический русский вопрос неминуемо встает перед каждым, кто решил создать собственный сайт в Интернет.

Первая мысль, которая посещает ветренную голову новоиспеченного вебмастера: "Конечно же, сделать личную страницу!" Действительно, это же так просто! Поместить на главной странице свою самую красивую цветную фотографию, изложить собственную биографию, рассказать о своих интересах и увлечениях, указать самые любимые ссылки, чтобы господа с Yahoo позеленели от зависти... Блеск! Стоит только прикрыть глаза, и сразу же представляется бешенно крутящийся счетчик (в качестве побочного эффекта - нытье провайдера по поводу сбоев сервера из-за резкого увеличения траффика), уважительные статьи в печатных (и непечатных) изданиях, множество выгодных предложений о сотрудничестве...

Спуститесь с небес на землю! Как ни прискорбно констатировать, но домашняя страница - это совсем не то, на что стоит тратить свое время и деньги. Если вы не снимались в главной роли в фильме "Титаник" или не работаете в Microsoft хотя бы пятнадцатым замом Билла Гейтса, то, увы, на вашу страницу будут ходить только ваши друзья да случайно забредшие по ссылкам из поисковых систем посетители. Счетчик будет раздражать вас своими нулями, гостевая книга покроется пылью, а свою некогда любимую фотографию вы возненавидите...

И это вовсе не заговор врагов против честного российского гражданина, решившего принести в Интернет что-то новое. Вот например, вы - скажите-ка, какие сайты вы в основном посещаете? Новостные, поисковые, архивы программ, чаты - в общем, что угодно, только не персональные странички. Будьте уверены - так же поступает большинство пользователей Интернет.

Что же делать? А как раз то, что посещает вышеупомянутое большинство пользователей Интернет - контент-проект, то есть проект, посвященный какой-то определенной теме. Именно наличием общей темы "сайт" отличается от "странички".

Распоространено мнение, что "сайт" - это проект, имеющий собственное доменное имя, то есть короткое имя вида www.проект.ru. Это не совсем так. Есть полно мест на Geocities, имеющих адрес типа www.geocities.com/Silicon Valley/Laboratory/7294/, которые никак нельзя назвать "страничками" - именно из-за их отношения к определенной тематике, а также сложности их структуры и качественного оформления. С другой стороны, полно доменных имен, закрепленных за отвратительными страницами, содержащими, в лучшем случае, пару ссылок, а в худшем - ничего. Если уж совсем удалиться от темы, то получить доменное имя гораздо легче, чем сделать качественный проект в Интернет.

Какой же теме посвятить ваш будущий сайт? Вспомните свои интересы и увлечения (четырьмя абзацами выше вы как раз хотели поместить информацию о них на вашу домашнюю страничку). Подумайте, что вас интересует больше всего, о чем вы можете рассказывать часами, не останавливаясь. Прекрасно, если у вас есть уникальная информация, такая, которую можете рассказать только вы. И не думайте, что вы не найдете единомышленников. Если в вашем патриархальном Пичугинске потрясающая коллекция дореволюционных утюгов интересует только приемщика вторсырья, то в Интернет ситуация, скорее всего, будет совсем другая. Число пользователей Интернет растет бешеными темпами и составляет десятки (а может быть, уже сотни :-)) миллионов человек, и свою аудиторию вы обязательно найдете.

Правда, от ложки дегтя, скорее всего, никуда не деться. Вполне возможно, что интересующая вас тема уже освещается каким-нибудь популярным сайтом, да еще и не одним. Чтобы выяснить это, посетите Рейтинг Рамблера, где тусуются все популярные сайты российской части Интернет. Зайдите в соответствующий раздел - например, "История". Если в первой двадцатке имеется сайт по той же теме - например - utugi.ru, то, возможно, вам немножко не повезло. Конкурировать с раскрученным и популярным сайтом бывает очень тяжело, а порой и вовсе невозможно. Но, тем не менее, опускать руки и заливать горе пивом с водкой не стоит. Посетите сайт конкурента и тщательно изучите его достоинства и недостатки. Действительно ли он полно освещает предмет? Часто ли он обновляется? Хорошо ли он офоромлен? Если вы можете сделать свой сайт лучше - смело принимайтесь за дело! Кроме того, лично мне кажется заслуживающей внимания точка зрения Антона Носика ("Вечерний Интернет") о том, что просторы Интернет настолько широки, а число пользователей так велико, что понятие "конкуренция" в Интернет неприменимо - места под солнцем хватит всем.

И еще: постарайесь трезво оценить собственные возможности. Не беритесь за проект, который вы, даже если и создадите, не сможете поддерживать - иначе вы просто потеряете время. Сделать каталог ресурсов Интернет уровня Yahoo не удалось пока никому - даже корпорациям с миллиардными бюджетами. Вести ежедневное обозрение тоже очень тяжело (хотя можете попробовать. В конце концов, если не будете справляться, перейдете на еженедельные выпуски).

Reklama.Ru. The Banner Network.

Статья Станислава Жаркова
Pro.Net.ru


Подход к тексту на WWW

С чего начинается создание страницы? Однозначно ответить сложно. Надо придумать себе правило, а потом им руководствоваться. Иногда работа начинается с графики, иногда с текста. Иногда с того, что вы заказчика вообще посылаете. Или он вас. По-разному бывает.

Допустим, мы начали с текста. Собственно говоря, HTML - язык разметки текста, а не картинок. А создание страниц начинается именно с HTML. Без него - только e-mail можно отправлять, да и то, в последнее время даже почта в гипертексте норовит прийти.

Чем отличается текст на WWW от текста на бумаге? В первую очередь тем, что текст из Интернета вы видите на экране. А это имеет вагон и маленькую тележку минусов. Текст с экрана неудобно читать. Он крив, кос и мелок. Другая - самая, пожалуй, большая - проблема заключается в том, что каждый человек, просматривающий вашу страницу на своем компьютере в своем браузере, волен настроить свои шрифты безо всякого учета ваших пожеланий. Он может выбрать себе основным шрифтом какую-нибудь готическую гарнитуру кеглем 24 пункта (кегель - размер шрифта, измеряется в пунктах). И вы ему не помешаете.

Поэтому вы должны смириться с тем, что шрифт у пользователя на экране вам неподвластен. Вы можете только управлять довольно размывчатым форматированием и создавать графику. Есть одна важная вещь, которую надо помнить - в Интернете вы создаете не столько дизайн, сколько стиль. Если дотошно следовать набору собственных правил в отношении к одному сайту, он будет узнаваем. Дело не только во входной странице, на которую потрачены основные силы. Дело в повторении некоторых элементов, определенных абзацных отступов, игре размерами, цветах. Помните это.

Copyright © 1997-1999 Артемий Лебедев
E-mail: tema@tema.ru